Рендеринг PDF в Edge и IE11 в Embed - PullRequest
Новая
       37

Рендеринг PDF в Edge и IE11 в Embed

0 голосов
/ 26 июня 2018

Я думал, что у меня есть решение для этого с использованием встраивания, чтобы Adobe отображал PDF в браузерах, когда я делал: 

<embed src="./assets/pdf/example-1.pdf"
       width="100%"
       height="675px"
       style="border: 1px solid red"
       type="application/pdf">

Но когда я пытаюсь динамически установить встраивание src с помощью URL.createObjectURL(blob) и связать его с embed в Angular, оно не рендерится: 

<embed [src]="url"
       width="100%"
       height="675px"
       style="border: 1px solid red"
       type="application/pdf">

Есть ли еще что-то для рендеринга PDF-файла во встраивание с использованием blob, отличного от: 

this.http(..., { responseType: 'blob', observe: 'response' })
  .subscribe((blob) => {

    url = URL.createObjectURL(blob);

    this.url = this.domSanitizer
      .bypassSecurityTrustResourceUrl(url);
  });

Я знаю, что могу использовать PDF.js с Angular с помощью плагина, но я не могу понять, как использовать ViewerJS с ним, чтобы получить элементы управления панорамированием, масштабированием и т. Д. Поэтому я просто хочу отобразить отправленный PDF вниз в ответ, используя Adobe в Edge и IE11. Это может быть в iframe, но это работало только в Edge, а не в IE11 без отображаемых ошибок

Например, использование этого было предложено для кросс-браузерной совместимости при получении base64 PDF, но это работает только для Edge, а не IE11. 

  // Default to Chrome
  let url = `data:application/pdf;base64,${src}`;

  // Internet Explorer 11 and Edge workaround
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const byteCharacters = atob(src);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], { type: 'application/pdf' });

    url = URL.createObjectURL(blob);

    if (this.url) {
      // Release URLs for performance and memory usage
      this.window.URL.revokeObjectURL(this.url);
    }
  }

  this.url = this.domSanitizer
    .bypassSecurityTrustResourceUrl(url);


<iframe id="result"
        [src]="url"
        style="width: 100%; height: 95vh; border: 1px solid red;"
        sandbox></iframe>

1 Ответ

0 голосов
/ 14 июля 2018

Это все работает для IE11, если вы удалите атрибут sandbox из iframe. Sooo, сняв ограничения безопасности, предусмотренные sandbox IE11 работает, хотя caniuse.com указывает, что он совместим с IE11.

...