Как показать предварительный просмотр PDF в IE11 с Blob URI - PullRequest
Новая
       39

Как показать предварительный просмотр PDF в IE11 с Blob URI

0 голосов
/ 27 апреля 2020

Я создаю веб-страницу, которая показывает предварительный просмотр PDF с Vue.

Однако на странице не отображается предварительный просмотр PDF только в IE11. Мне кажется, что причина, по которой он не показывает предварительный просмотр PDF в IE11, заключается в том, что атрибут :src в iframe имеет URI Blob .

Я знаю, что это работает, если атрибут :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>

Ребята, ребята? знаете, как отобразить предварительный просмотр PDF в IE11 с помощью BLRI URI ?

1 Ответ

0 голосов
/ 27 апреля 2020

Насколько я знаю, Inte rnet Explorer не поддерживает использование URI DATA в качестве источника 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, он хорошо работает на моей стороне, используя IE11 Вы можете проверить это):

...