Display embedded PDF in Internet Explorer 11 from binary string or base64

问题

There is a 3rd party service which sends me a PDF file in either binary string or base64 encoded. Is there any possibility to display the PDF embedded in IE 11 using either binary string or base64 encoded.

From SO and other forums, I concluded that IE 11 supports data uri only for images and not PDF (I might be wrong) which rules out base64. So the only option left is to display from binary string. I am using it in a Node App but I do not have the option to first save the retrieved file to Node server and use static URL.

Please let me know if above is achievable in IE 11.

Currently I'm trying to use npm package of https://github.com/pipwerks/PDFObject. For Chrome & Firefox, I retrieve the base64 file and embed it using the above package and works fine.

回答1:

This solution uses pdf.js

Key steps in rendering a base64 PDF using PDF.js library

First decode it using atob
Then initializing a Uint8Array using above decoded data

Abstract from express-pdfjs/scripts/App.js

let options = {
      method: 'GET',
      uri: 'http://localhost:5000/getBase64Pdf',
      resolveWithFullResponse: true
    }
rp(options)
  .then((response) => {
    if (response.statusCode !== 200) {
      console.error('http not 200 but : ', response.statusCode)
    } else {
      console.info('connected successfully : ' + response.statusCode)
      let pdfData = atob(response.body)
      let uint8ArrayPdf = new Uint8Array(pdfData.length)
      for (let i = 0; i < pdfData.length; i++) {
        uint8ArrayPdf[i] = pdfData.charCodeAt(i)
      }
      let pdfjsframe = document.getElementById('pdfViewer');
      pdfjsframe.contentWindow.PDFViewerApplication.open(uint8ArrayPdf);
    }
  })

pdfViewer is an iframe in index.html

<iframe id="pdfViewer" src="http://localhost:3000/express-pdfjs/pdfViewer/web/viewer.html" height="1600" width="850" />

Please find a sample implementation for this using React on client side @ https://github.com/rohanray/so-pdf-base64

Update: Also have a look at @user3590235 answer : Display embedded PDF in Internet Explorer 11 from binary string or base64

回答2:

Following the discussion with @roray - I'm adding a slightly different solution on the menu here :) First off: 1.not using base64 string for this (although possible). 2. I'm working on asp mvc 3. using viewer.html viewer of pdf.js

So, from the server/controller fetch file from db and return bites

public ActionResult LoadFile(int id)
{
   var file = db.Files.Where(i => i.Id == id).FirstOrDefault();
   return File(file.BinaryFile, MediaTypeNames.Application.Pdf, "Name.pdf");
}

In the view/html add an iframe with source unspecified (src="") alternatively can created it on the fly on page-load event.BTW, I tried object, embed and iframe with FF/Chrome/Edge/IE 11 and found iframe seems to work consistently across the board. Dont like iframe though :/

<iframe src="" name="printDoc" id="printDoc" width="800" height="1000" type="application/pdf"></iframe>

Finally, in your script tag. This can be done via Ajax just the same. Basically, soon as the document is ready call the server, get the file in bytes, convert to blob url, append the blob url to the relative location of '/web/viewer.html?file=' in your project and update the src="" attribute of your iframe.

 $(document).ready(function myfunction() {
 var xhr = new XMLHttpRequest();
    // works for EDGE/Chrome/FFox
    xhr.open("GET", "/Documents/LoadFile/" + fileId, true);
    xhr.responseType = "blob";
    xhr.onload = function (e) {
        if (this.status === 200) {
            var blob = new Blob([this.response], { type: 'application/pdf' });
            console.log('Not IE 11');
            var url = window.URL.createObjectURL(blob);
            _iFrame = document.querySelector("#printDoc");
            _iFrame.setAttribute('src', '/web/viewer.html?file=' + url);
        }
    };
    xhr.send();
    
});

This will open the pdf embedded in the viewer.html embedded in the iframe. MS Edge works fine with this but not the blob url being sent as a query param over the address bar which obviously is supported by FF/Chrome. And, that's why I took this option.

PS. IE 11 remains hopeless for me so I used var blob = new Blob([this.response], {type: 'application/pdf' });window.navigator.msSaveOrOpenBlob(blob, fileName);Please let me know if you find a way to improve IE 11 performance

来源：https://stackoverflow.com/questions/40170381/display-embedded-pdf-in-internet-explorer-11-from-binary-string-or-base64

标签

javascript

html

internet-explorer-11

pdf.js

pdfobject