Question

有第三方服务向我发送二进制字符串或base64编码的PDF文件。是否有可能使用二进制字符串或base64编码显示嵌入在IE 11中的PDF。

从SO和其他论坛，我得出结论，IE 11仅支持数据uri用于图像而不支持PDF（我可能错了），它排除了base64。所以剩下的唯一选择就是从二进制字符串中显示。我在Node App中使用它但我没有选择先将检索到的文件保存到Node服务器并使用静态URL。

如果在IE 11中可以实现以上目的，请告诉我。

目前我正在尝试使用https://github.com/pipwerks/PDFObject的npm包。适用于Chrome＆amp; Firefox，我检索base64文件并使用上面的包嵌入它并且工作正常。

Answer 1

此解决方案使用pdf.js

使用PDF.js库呈现base64 PDF的关键步骤

首先使用atob解码它
然后使用上面的解码数据初始化Uint8Array

来自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是index.html中的iframe

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

请在客户端上使用React查找示例实现侧 @ https://github.com/rohanray/so-pdf-base64

更新：另请查看@ user3590235答案：Display embedded PDF in Internet Explorer 11 from binary string or base64

Answer 2

在使用@roray进行讨论之后-我在这里的菜单上添加了稍微不同的解决方案：）首先：1.不使用base64字符串（尽管可以）。 2.我正在研究ASP MVC 3.使用pdf.js的viewer.html查看器

因此，从服务器/控制器从db获取文件并返回位

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

在视图/ html中添加未指定源（src =“”）的iframe，也可以在页面加载事件中动态创建它。BTW，我尝试使用FF / Chrome / Edge / IE进行对象，嵌入和iframe 11，发现iframe似乎在各个方面都能正常工作。虽然不喜欢iframe：// p

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

最后，在您的脚本标签中。同样可以通过Ajax来完成。基本上，一旦文档准备就绪，就可以调用服务器，以字节为单位获取文件，转换为blob url， 将blob url附加到“ /web/viewer.html?file=”中的相对位置您的项目并更新iframe的src =“”属性。

 $(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();
    
});

这将打开嵌入在iframe中的viewer.html中嵌入的pdf。 MS Edge可以很好地解决此问题，但不能将blob url作为查询参数通过地址栏发送，显然FF / Chrome支持。而且，这就是为什么我选择此选项。

PS。 IE 11对我来说仍然没有希望，所以我使用了var blob = new Blob（[this.response]，{type：'application / pdf'}）; window.navigator.msSaveOrOpenBlob（blob，fileName）;请让我知道是否找到一种改善IE 11性能的方法

从二进制字符串或base64在Internet Explorer 11中显示嵌入的PDF

2 个答案:

使用PDF.js库呈现base64 PDF的关键步骤

来自express-pdfjs / scripts / App.js