<iframe> 下载 PDF 文件而不是显示

Question

<iframe> 下载 PDF 文件而不是显示

angularpdfiframedisplaycontent-disposition

4

这是我的组件.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。我如何更改这个设置以使其适用于所有浏览器？

- Tejashri Patange

2个回答

-3

问题是我正在渲染一个通过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>

- Tejashri Patange

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

我不明白为什么属性周围要加上括号：[src] 如果你还不知道：不要这样做。
<iframe>没有type作为一个有效的属性，但是type对于<iframe>的姐妹标签<object>和<embed>确实有效。

由于SO的限制性沙箱，以下演示无法在SO上运行。请前往此Plunker查看功能演示。源PDF来自PDFObject

~~Plunker~~

看起来Plunker不再运行嵌入式内容，所以如果您想查看一个正在运行的演示，请将整个代码复制并粘贴到任何文本编辑器（记事本，Notepad ++等）中，并另存为HTML文件（.html文件扩展名）。

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