Question

这是我的component.html

＆＃xA;＆＃xA;

 ＆lt; iframe [src] =“frameSrc | safe”class =“frameSet”type =“application / pdf “＆＃XA; frameborder =“0”webkitallowfullscreen mozallowfullscreen allowfullscreen＆gt;＆＃xA;此浏览器不支持PDF。请下载PDF以查看它：＆＃xA; ＆lt; a href =“frameSrc | safe”＆gt;下载PDF＆lt; / a＆gt;＆＃xA; ＆lt; / iframe＆gt;＆＃xA;

＆＃xA;＆＃xA;

在浏览器中打开此组件（ Chrome ）时，会下载pdf而不是显示。 frameSrc 来自一个父组件，我将其指定为 [src] 。我想显示pdf而不是下载。我做了一些研究，发现我的浏览器默认情况下 Content-Disposition 是 attachment 。我怎么能改变这个，所以这适用于每个浏览器？

＆＃XA;

Answer 1

我不明白为什么属性周围有括号：[src]如果您还不知道：不要这样做。
<iframe>没有type作为有效属性，但type适用于<iframe>'s sister tags and`。

以下演示由于其限制性沙箱而无法在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>

Answer 2

问题是我正在渲染一个超过https的pdf文件，而我所得到的一直都是CORS错误

我只是在index.html文件中添加了meta标签，如本节所述：

<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>

<iframe>下载pdf文件而非显示

2 个答案:

Plunker

演示