如何在具有Blob URI的IE11中显示PDF预览

Question

我正在建立一个显示Vue的PDF预览的网页。

但是，该页面仅在IE11中不显示PDF预览。在我看来，它在IE11中不显示PDF预览的原因是:src中的iframe属性具有Blob URI。

我知道如果:src属性具有HTTP/HTTPS URI，则可以使用。

这是我的源代码。

<template>
  <div>
    <div>
      PDF Preview
    </div>
    <iframe
      width="560"
      height="315"
      :src="pdfBlobURL"
    >

    </iframe>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pdfBlobURL: ''
      }
    },
    mounted() {
      this.$axios.post("/api/url/to/fetch/pdfBlobData", { id: 1 }, { responseType: 'blob' })
        .then(function(response) {
          // create Blob URI by pdfBlob data that is fetched from backend
          this.pdfBlobURL = window.URL.createObjectURL(response.pdfBlob)
        }.bind(this))
    }
  }
</script>

你们知道如何使用Blob URI在IE11中显示PDF预览吗？

Answer 1

据我所知，Internet Explorer不支持将DATA URI用作IFRAME的来源。

作为替代解决方法，建议您先在IE浏览器中下载PDF文件，然后使用IE浏览器显示PDF文件。

您可以参考以下代码：

function myfunction() {
    var data = "BASE64STRING";
    var fileName = "test.pdf";
    //For IE using atob convert base64 encoded data to byte array
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        var byteCharacters = window.atob(data);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], { type: 'application/pdf' });
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
        // Directly use base 64 encoded data for rest browsers (not IE)
        var base64EncodedPDF = data;
        var pdfWindow = window.open();
        pdfWindow.document.write('<iframe src="data:application/pdf;base64,' + base64EncodedPDF+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>');

    }
}

[此外，您可以尝试使用ES5版本的pdf.js和pdf.worker.js版本（此处是有关使用pdf.js的sample，在我这边使用IE11效果很好，可以进行检查） ：

• pdf.js ES5版本：https://mozilla.github.io/pdf.js/es5/build/pdf.js
• pdf.worker.js ES5版本：https://mozilla.github.io/pdf.js/es5/build/pdf.worker.js