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

kwvwclae  于 2022-12-17  发布在  Java
关注(0)|答案(2)|浏览(224)

有一个第三方服务发送给我一个PDF文件在二进制字符串或base64编码。是否有任何可能显示的PDF嵌入在IE 11使用二进制字符串或base64编码。
从SO和其他论坛,我得出结论,IE 11只支持图像的数据URI,而不支持PDF(我可能错了),这排除了base64。所以剩下的唯一选择是从二进制字符串显示。我在一个节点应用程序中使用它,但我没有选择首先将检索到的文件保存到节点服务器并使用静态URL。
请让我知道,如果以上是在IE 11实现。
目前我尝试使用https://github.com/pipwerks/PDFObject的npm包,对于Chrome和Firefox,我检索base64文件并使用上面的包嵌入它,工作正常。

s3fp2yjn

s3fp2yjn1#

此解决方案使用[pdf.js] 1

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

  • 先用atob解码
  • 然后使用上述解码数据初始化Uint 8Array

摘要来自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" />


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

ruoxqz4g

ruoxqz4g2#

在和@roray讨论之后,我在这里的菜单上添加了一个稍微不同的解决方案:)首先:1.不使用base64字符串(虽然可能)。2.我正在使用asp mvc。3.使用pdf.js的viewer.html查看器
因此,从服务器/控制器从数据库获取文件并返回字节

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中添加一个未指定源代码的iframe(src="”),或者可以在页面加载事件中动态创建它。顺便说一句,我在FF/Chrome/Edge/IE 11中尝试了对象、嵌入和iframe,发现iframe似乎在所有方面都能一致地工作。但不喜欢iframe:/

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

最后,在你的script标记中。这可以通过 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:“应用程式/pdf”});窗口.导航器.msSaveOrOpenBlob(blob,文件名);请让我知道,如果你找到一种方法来提高IE11的性能

相关问题