javascript - 如何在 iFrame 中加载 PDF 文件?在 react 中工作

标签 javascript google-chrome iframe

我正在尝试在 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 }}
      />
   )
}

我收到警告:

Resource interpreted as Document but transferred with MIME type application/pdf: "http://localhost:8080/resources/crayola.pdf"

但是当我转到链接时:"http://localhost:8080/resources/crayola.pdf " 我可以很容易地看到 PDF 的内容,所以有 pdf 文件,问题是:它没有被上传/呈现在框架。为什么?

这适用于 MOZILLA FIREFOX 和 EDGE,但不适用于 CHROME。

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

最佳答案

这与React无关,问题显然出在GOogle-Chrome中。 这是我做的解决方案:

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

以及对我有帮助的链接: PDFobject

关于javascript - 如何在 iFrame 中加载 PDF 文件?在 react 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51494680/

相关文章:

javascript - 风格 react 路由器事件链接

css - 为什么 Safari 以不同方式呈现 CSS 多列布局?

javascript - 如何在特定转换事件后加载组件内的元素

javascript - 如何从iframe标签中获取data-id值?

javascript/jquery 从选择中删除或删除选项

javascript - 使用Meteor Spotify API根据单词搜索返回专辑列表,需要为列表中的每个专辑拉入轨道

javascript - Chrome 扩展在每个选项卡更改时获取当前域

google-chrome - Electron v4 是否支持 ECMAScript 模块?

iframe 的 Javascript 事件完成加载

javascript - Google Pagespeed 中的 "above-the-fold content"是什么?