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

Question

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

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

请告诉我以上是否可以在 IE 11 中实现。

目前我正在尝试使用 https://github.com/pipwerks/PDFObject 的 npm 包。对于 Chrome 和 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" />

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

更新： 也看看@user3590235 的回答：

Answer 2

在与@roray 的讨论之后 - 我在这里的菜单上添加了一个稍微不同的解决方案:) 首先：1.not 为此使用 base64 字符串（尽管可能）。 2. 我正在研究 asp mvc 3. 使用 viewer.html 查看器 pdf.js

因此，从 server/controller 从数据库中获取文件并 return 咬

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

在 view/html 添加一个未指定源的 iframe (src="") 或者可以在页面加载时动态创建它 event.BTW，我尝试了对象、嵌入和 iframe FF/Chrome/Edge/IE 11 并发现 iframe 似乎在所有方面都能正常工作。不过不喜欢 iframe :/

<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

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

javascript

html

internet-explorer-11

pdf.js

pdfobject

使用 PDF.js 库渲染 base64 PDF 的关键步骤

来自 express-pdfjs/scripts/App.js 的摘要