如何在 iFrame 中加载 PDF 文件？在反应中工作答案

【问题标题】：How to load PDF file inside of iFrame? Working in React如何在 iFrame 中加载 PDF 文件？在反应中工作
【发布时间】：2018-12-31 20:14:36
【问题描述】：

我正在尝试在 REACT 中的 iFrame 中加载 pdf 文件，代码如下所示：

render(){
   return(
      <iframe
          sandbox="allow-same-origin allow-scripts allow-forms"
          title="PortletIFrameWidget"
          src={'.resources/crayola.pdf'}
          ref={(f) => { this.ifr = f }}
      />
   )
}

我收到警告：

资源被解释为 Document 但以 MIME 类型传输申请/pdf：“http://localhost:8080/resources/crayola.pdf”

但是当我转到链接时：“http://localhost:8080/resources/crayola.pdf”我可以很容易地看到PDF的内容，所以有pdf文件，问题是：它没有被上传/渲染框架。为什么？

这适用于 MOZILLA Firefox 和 EDGE，但不适用于 Chrome。

知道为什么会这样吗？以及如何在 REACT 中的 iFrame 中加载 PDF 文件

【问题讨论】：

这与 React 无关，看看这个stackoverflow.com/questions/19654577/html-embedded-pdf-iframe

标签： javascript google-chrome iframe

【解决方案1】：

这与 React 无关，问题显然出在 GOogle-Chrome 上。这是我提出的解决方案：

<iframe src="./resources/crayola.pdf" title="title">
     Presss me: <a href="./resources/crayola.pdf">Download PDF</a>
</iframe>

以及帮助我的链接： PDFobject

【讨论】：

【解决方案2】：

尝试使用嵌入标签：

<embed src={'.resources/crayola.pdf'} type="application/pdf"/>

【讨论】：