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

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

0 голосов
/ 31 мая 2018

Это мой 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 в настройках моего браузера по умолчанию.Как я могу изменить это, чтобы это работало на каждом браузере?

1 Ответ

0 голосов
/ 31 мая 2018

  • Я не понимаю, почему в атрибуте есть квадратные скобки: [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>
...