<iframe> 下载 pdf 文件而不是显示答案

【问题标题】：<iframe> downloads pdf file instead of displaying<iframe> 下载 pdf 文件而不是显示
【发布时间】：2018-11-10 10:27:56
【问题描述】：

这是我的组件.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。我怎样才能改变它，以便它适用于每个浏览器？

【问题讨论】：

标签： angular pdf iframe display content-disposition

【解决方案1】：

问题是我正在渲染一个超过 https 的 pdf，而我得到的只是 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>

【讨论】：

【解决方案2】：

我不明白为什么属性周围有括号：[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>

【讨论】：

在我的情况下，我的链接不起作用，我去你的演示并将我的链接 PDF 替换为你的，但仍然不起作用，请帮我解决我的问题。
我将 url 剪切并粘贴到浏览器地址栏，因此它可以与 PDF 插件一起使用，但我知道您需要能够被更多的用户访问。我认为问题在于它所在的服务器没有在安全协议上运行。将网址剪切并粘贴到地址栏中但在打开网址之前，将s 添加到http: => https:
非常感谢您的回答，我在我的应用程序中安装了一个模块并解决了问题。这是我的模块：github.com/vadimdez/ng2-pdf-viewer
ng2-pdf-viewer 用于加载本地 pdf 而不是 https