Data URI Hash Parameters (Hide PDF toolbar for data URI)

Question

I have a PDF base64 encode data URI.

eg:

return <object data="data:application/pdf;base64,JVBERi0xLjMKJf////8KOCAwIG9...VmCjI0MTU4OAolJUVPRgo=" type="application/pdf"></object>

I am able to embed it in the page without any problem. However, by default browsers include a toolbar in the PDF.

It seems like the only way to disable this toolbar is to include some hash parameters at the end of the url.

eg.

<object data="path/to/file.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf"></object>

Which works fine if the PDF is accessed through a relative path or URL, but I cant figure out a way to make this work with a data URI.

Is there any way to include these hash parameters at the end of a URI?

Or does anyone know some way to hide this toolbar some other way?

Any help is greatly appreciated. Thanks in advance. :)

Answer 1

Like kolin said there is no way to directly send in query strings with a data URI. However, you can switch the data URI into a blob URL and pass the parameters in there.

Just take your base64 data and convert it into a pdf blob like so:

function b64toBlob(b64Data, contentType) {
var byteCharacters = atob(b64Data)

var byteArrays = []

for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    var slice = byteCharacters.slice(offset, offset + 512),
        byteNumbers = new Array(slice.length)
    for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i)
    }
    var byteArray = new Uint8Array(byteNumbers)

    byteArrays.push(byteArray)
}

var blob = new Blob(byteArrays, { type: contentType })
return blob}

Then use the createObjectURL method to create a URL you can put query strings on like so:

URL.createObjectURL(b64toBlob(data.buffer.data, 'application/pdf')) + '#toolbar=0&navpanes=0&scrollbar=0'

Set your object's data attribute to the resulting string and you'll have it.