如何使用 Blob URI 在 IE11 中显示 PDF 预览

Question

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

但是，该页面仅在 IE11 中不显示 PDF 预览。在我看来，它在 IE11 中不显示 PDF 预览的原因是 iframe 中的 :src 属性具有 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>

你们知道如何在 IE11 中使用 Blob URI 显示 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>');

    }
}

此外，关于使用pdf.js，你可以尝试使用pdf.js and pdf.worker.js version (Here is a sample的ES5版本，我这边使用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

如何使用 Blob URI 在 IE11 中显示 PDF 预览

How to show PDF preview in IE11 with Blob URI

pdf

internet-explorer

vue.js