6

I'm using below code to open base64 encoded pdf file using javascript. It works well with small pdf files below 1MB. But it doesn't work if the file size is greater than 2MB. Please let me know if you have a working code for similar scenario.

var base64 = "base64 content";
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + base64 + "'></iframe>");
Rabi CRM
  • 61
  • 1
  • 1
  • 2
  • 1
    why you encode PDF as base64 at first place? – apple apple Oct 21 '19 at 14:30
  • Welcome to SO. "it doesn't work" isn't a great description of what's going on here Why don't you tell us exactly what happens? – spender Oct 21 '19 at 14:32
  • 1
    A 2MB string is going to be somewhat unwieldy, however you cut this? Where does that base64 string actually come from? Is it possible to keep the data in binary format instead? – spender Oct 21 '19 at 14:51
  • We get the base64 encoded pdf files from different system via webservice in an string format. Now, in our system we need to convert it back to pdf and open it in browser/acrobat. The code I have mentioned here works well if the size of pdf file is less than 1MB, above that it opens a blank window without any content. Is there any limitation in Javascrip to open the base64 encoded pdf files if the size is more than 1MB? – Rabi CRM Oct 30 '19 at 08:51

3 Answers3

10

There indeed seems to be a limit on both Chrome's pdf reader plugin and Mozilla's pdf.js (used by Firefox) as to the size of pdf documents loaded by a data-URI.

Note that this limit is not dictated by anything else than these plugin/scripts (pdf.js even just crash the tab), browsers do support far bigger dataURLs in many places like <img>, <video>, <iframe> etc.

You can see a live repro here But beware if you are on Firefox, it may crash your browser, so toggle the checkbox at your own risk. (Outsourced because somehow Chrome can't load pdfs from StackSnippet's null origined iframes).

For a fix, convert your base64 data back to binary, packed in a Blob and then set your iframe's src to a blob-URI pointing to that Blob:

const blob = base64ToBlob( base64, 'application/pdf' );
const url = URL.createObjectURL( blob );
const pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='" + url + "'></iframe>");

function base64ToBlob( base64, type = "application/octet-stream" ) {
  const binStr = atob( base64 );
  const len = binStr.length;
  const arr = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    arr[ i ] = binStr.charCodeAt( i );
  }
  return new Blob( [ arr ], { type: type } );
}

Once again Live Demo as an outsourced plnkr.

But note that it would be even more efficient if your API sent that pdf directly as a Blob, or even if you could make your <iframe> point directly to the resource's URL.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
0

The URL limit on most popular browsers is usually 65,535 characters (~64 KB), so this is a constraint on the number of characters in the URL. You usually want this number below 2,000 (2 KB) so that your site works on most browsers (legacy is some cases).

See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Length limitations

Although Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type).

See also

Community
  • 1
  • 1
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
  • We get the base64 encoded pdf files from different system via webservice in an string format (no URL, the entire file). Now, in our system we need to convert it back to pdf and open it in browser/acrobat. The code I have mentioned here works well if the size of pdf file is less than 1MB, above that it opens a blank window without any content. Is there any limitation in Javascrip to open the base64 encoded pdf files if the size is more than 1MB? – Rabi CRM Oct 30 '19 at 08:53
  • @RabiCRM, I believe you misunderstood. What Mr. Polywhirl means is that there is a limit to the amount of characters you can set in a browser URL. Setting an iframe src is the same thing as setting a URL. That is why your method fails with large files. A larger file means more characters in your base64 string. So when your base64 string is larger than 65,535 characters, the browser won't be able to parse the url (or the iframe src in your case). – Dimitri Troncquo Aug 05 '21 at 10:32
0

You could instead try to read/store the file as Blob then use saveAs from FileSaver.js to download or open the pdf file

Nabster
  • 1,187
  • 2
  • 10
  • 27