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

Я думал, что у меня есть решение для этого с использованием встраивания, чтобы 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 ответ

Решение

Это все работает для IE11, если вы удалите sandbox атрибут из фрейма. Ооочень, сняв ограничения безопасности, предоставленные sandbox IE11 работает, хотя https://caniuse.com/ указывает, что он совместим с IE11.

Источник
Другие вопросы по тегам