base64 embeded PDF files won't render in Chrome

Question

Some PDF files won't render in Chrome browser but will render fine in Firefox. All files render fine in all browsers if emeded directly.

<object id="content-view" :data="content_view.base64" type="application/pdf"></object>

The confusing part is that the problem is only for some files and not all. Files are stored in a folder that is not public and that's why they are served as base64 for the user to view.

I tested the problematic files by using online base64 decoders and I get the same result. Rendered in FF, not rendered in Chrome.

I cannot share any of the PDF files. They are all from the same source, scanned from the same device, PDF version 1.4, 4 pages.

I have tried:

using iframe, embed and object (same result)
unblocking Insecure content in Chrome site settings
opening and re-saving in Adobe Acrobat
using online PDF analyzers to see if any problems present (none found)

This could very well be a bug in chrome, perhaps you should submit a bug report — Joeri, Apr 23 '20 at 15:27
use pdf.js, i have used it on my website to render pdf's in a canvas on my webpage — Stanley, Apr 26 '20 at 15:27
I have the same problem. This is very annoying, in FF it opens fine. — ihavenokia, Jul 19 '21 at 09:14
Hello just wondering if anyone found a solution to this working in chrome ? — underwater, Aug 05 '22 at 12:26

score 1 · Answer 1 · answered Aug 08 '22 at 20:33

I had the exact same issue. I noticed that some of the PDFs that are more than 1MB isn't loading.

I found a solution here: Open base64 encoded pdf file using javascript. Issue with file size larger than 2 MB

Need to change the Base64 string to a BLOB. Then create a URL to be used for iframe src.

Here is the code:

base64PDFToBlobUrl( base64 ) {
  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 );
  }
  const blob =  new Blob( [ arr ], { type: 'application/pdf' } );
  const url = URL.createObjectURL( blob );
  return url;
}

This will return a url that you can put inside your iframe, embed or object src. This way, you can still load the PDF in a page without opening it in another tab.

Thanks, will give it a try as soon as possible. – kopz Aug 09 '22 at 10:49 — kopz, Aug 09 '22 at 10:49

score 0 · Answer 2 · answered Apr 25 '20 at 09:49

Rather than use the browsers native PDF renderer, you could use the JS one written by Mozilla.

ViewerJS provides a nice interface to this and if you want to embed it fullsize in a page, then you can place it in an iframe and control that with iFrame-resizer.

Ajanyan Pradeep · Answer 3 · 2020-04-26T14:51:45.877

0

Instead of opening the PDF file in HTML object element, open it in a new window using Blob URL.

Please refer

Creating a BLOB from a Base64 string in JavaScript

to convert Base64 to Blob

edited Apr 26 '20 at 14:51

answered Apr 26 '20 at 14:35

Ajanyan Pradeep

1,097
1
16
26

base64 embeded PDF files won't render in Chrome

3 Answers3