CODEWITHSUNDEEP
javascript
Rabi CRM
Rabi CRM

Reputation: 91

Open base64 encoded pdf file using javascript. Issue with file size larger than 2 MB

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>");

Upvotes: 9

Views: 21223

Answers (3)

Kaiido
Kaiido

Reputation: 136627

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.

Upvotes: 13

Nabster
Nabster

Reputation: 1227

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

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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

Upvotes: 0

Related Questions