14

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.

PDF toolbar example

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. :)

nmajor
  • 497
  • 4
  • 10

4 Answers4

19

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.

Sam-Graham
  • 1,254
  • 12
  • 20
  • 1
    This answer is working for me. The other one (injecting toolbar=0 between application/pdf; and base64) did not work, I got ERR_INVALID_URL error in chrome. – Kasheftin Feb 27 '19 at 11:39
5

I'm in the same position myself here, and, unfortunately looking at

https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

the statement (within "common problems"):

No support for query strings, etc. The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax ?parameter-data) with a data URI will just include the query string in the data the URI represents.

seems to indicate that this is not possible.

If you are trying to prevent the printing of the PDF, and have access to the code that generates it (such as iText) you can programatically disable the print button using code similar to (encrypting the doc)

stamper.setEncryption(null,null, PdfWriter.HideWindowUI, PdfWriter.STRENGTH40BITS); 
stamper.setViewerPreferences(PdfWriter.HideToolbar);

however this will not prevent the document being able to be saved. (see : http://developers.itextpdf.com/question/how-disable-save-button-and-hide-menu-bar-adobe-reader)

It would be nice to be able to pass through has parameters to an embed(or object) element, but ho hum.

kolin
  • 2,326
  • 1
  • 28
  • 46
  • Ended up using `URL.createObjectURL()`. Much better alternative with no restrictions or limitations. – m4heshd May 18 '21 at 15:09
3

Yesterday I was also facing similar problem and found a working solution. When you are using base64 in URI and trying to set default behavior none(#toolbar=0&navpanes=0&scrollbar=0&), src is not able to detect the boundary starting with '#'. You can get wanted result with this instead data:application/pdf;#toolbar=0&navpanes=0&scrollbar=0&;base64,your_base64_string. As per your code you can return like this:

return <object data="data:application/pdf;#toolbar=0&navpanes=0&scrollbar=0&;base64,JVBERi0xLjMKJf////8KOCAwIG9...VmCjI0MTU4OAolJUVPRgo=" type="application/pdf"></object>

I hope this may help you and others.

Ravi
  • 47
  • 3
-3

you just need to put '#toolbar=0&' in data Url after 'data:application/pdf;' tag to hide toolbar from pdf viewer as written below-

  • data:application/pdf;#toolbar=0;base64
Shalini Pokhra
  • 11
  • 1