<iframe> загружает файл PDF вместо отображения

Question

<iframe> загружает файл PDF вместо отображения

Это мой component.html

    <iframe [src]="frameSrc | safe"  class="frameSet" type="application/pdf"
     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
     This browser does not support PDFs. Please download the PDF to view it: 
     <a href="frameSrc | safe">Download PDF</a>
   </iframe>

Когда этот компонент открывается в моем браузере (Chrome), вместо отображения загружается PDF-файл. frameSrc исходит от родительского компонента, который я назначаю в качестве [src], Я хочу отобразить PDF вместо загрузки. Я провел некоторое исследование и выяснил, Content-Disposition является attachment в моем браузере по умолчанию. Как я могу изменить это, чтобы это работало на каждом браузере?

4

angular pdf iframe display content-disposition

Источник

user9855057 31 май '18 в 11:57

1 ответ

Другие вопросы по тегам angular pdf iframe display content-disposition

user2813224 31 май '18 в 13:34 2018-05-31 13:34 · Answer 1 · 2018-05-31 13:34

Я не понимаю, почему в атрибуте есть квадратные скобки: [src] Если вы еще не знаете: не делайте этого.
<iframe> не имеет type как действительный атрибут, но type работает на <iframe>'s sister tagsand `.

Следующая демонстрация не работает на SO из-за их ограниченной песочницы. Перейдите к этому Plunker, чтобы увидеть функциональную демоверсию. Источник PDF предоставлен PDFObject

Plunker

демонстрация

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    figure {
      display: table;
      border: 3px ridge grey;
      position: relative;
      width: 96vw;
      min-height: 250px;
      height: auto;
      margin: 0 auto 35px;
    }
    
    figcaption {
      border: 3px ridge grey;
      text-align: center;
      font: 900 20px/1.5 Verdana;
      padding: 0 0 8px 0;
      background: rgba(51, 51, 51, 0.3);
      color: #fff;
    }
    
    iframe,
    object,
    embed {
      overflow: hidden;
      position: absolute;
    }
  </style>
</head>

<body>

  <figure>
    <figcaption>IFRAME</figcaption>
    <iframe src="https://pdfobject.com/pdf/sample-3pp.pdf#page=1" class="frameSet" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>
  </figure>

  <figure>
    <figcaption>OBJECT</figcaption>
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" class="objectSet" type="application/pdf" width="100%" height="100%"></object>
  </figure>

  <figure>
    <figcaption>EMBED</figcaption>
    <embed src="https://pdfobject.com/pdf/sample-3pp.pdf#page=3" class="embedSet" type="application/pdf" width="100%" height="100%">
  </figure>

</body>


</html>

user9855057 05 сен '19 в 12:37 2019-09-05 12:37 · Answer 2 · 2019-09-05 12:37

Дело в том, что я рендерил pdf, который был поверх https, и все, что я получал, это ошибка CORS все время

Я просто добавил метатег в файл index.html, как в разделе:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

и на странице / модуле, где я хотел отобразить, это выглядит так:

  <object data="your_url_to_pdf" type="application/pdf">
     <iframe src="https://docs.google.com/viewer? 
     url=your_url_to_pdf&embedded=true"
     frameborder="0" webkitallowfullscreen mozallowfullscreen 
     allowfullscreen>
     </iframe>
  </object>