如何在iFrame中加载PDF文件？在React中操作

Question

我将翻译为：

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

我收到了一个警告：

资源被解释为文档，但使用MIME类型 应用程序/pdf传输："http://localhost:8080/resources/crayola.pdf"

但是当我访问链接："http://localhost:8080/resources/crayola.pdf"，我可以轻松看到PDF的内容，所以pdf文件存在，问题是：它没有被上传/渲染在iFrame中。为什么？

这在Mozilla Firefox和Edge中都有效，但在Chrome中无效。

有任何想法为什么会发生这种情况吗？如何在REACT中加载PDF文件到iFrame中？

- Zack Zilic

---

这与React无关，查看此链接 https://dev59.com/0WIk5IYBdhLWcg3wBqGW - kkkkkkk

尝试在React中使用Ref，在初始渲染后设置src属性。 - kesh

Answer 1

这与React无关，问题显然出在Google Chrome中。以下是我制定的解决方案：

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

以下是帮助过我的链接：PDFobject

这个链接可以帮助你在网页中嵌入PDF文档。

- Zack Zilic

Answer 2

尝试使用嵌入标签：

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

- shlgug

Answer 3

在React中，可以在函数组件中使用 useRef，并使用 setAttribute 在初始渲染之后进行设置。

function App() {
  const refIframe: any = useRef(null);
  
  useEffect(() => {
       refIframe.current.setAttribute(
        'src',
        './resources/crayola.pdf',
    );
  }, []);
  return (
      <iframe
        title="Iframe Doc"
        ref={refIframe}
      />
  );
}

export default App;

- kesh

---

为什么要这样做，而不是静态设置属性？ - rantao