reactjs 在react应用程序中查看pdf文件引发错误

hs1ihplo 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(404)

我试图打开PDF文件在React应用程序上的菜单点击，但得到这个错误

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file

我有静态的pdf文件在我的项目目录，我想只是打开它在一个新的选项卡中的菜单点击事件。
pdf文件本身并不是真的很大，大约7MB
做这件事最好的方法是什么？

import testPDF from "../assets/pdf/test.pdf";

  const handleOpenPDF = () => {
    window.open(testPDF);
  }

  <Menu.Item onClick={handleOpenPDF}>
    <Text>
      View PDF
    </Text>
  </Menu.Item>

reactjs

来源：https://stackoverflow.com/questions/74880255/view-pdf-file-in-react-app-throwing-error

2条答案

按热度按时间

zqdjd7g91#

你可以使用https://react-pdf.org/库。应该可以安装它，导入它，然后将它包含在你的代码中，如下所示：

import { Document } from 'react-pdf';

const handleOpenPDF = () => {
  const container = document.createElement('div');
  ReactDOM.render(
    <Document
      file={testPDF}
      onLoadSuccess={() => console.log('PDF successfully loaded!')}
    >
      <p>Loading PDF...</p>
    </Document>,
    container
  );
  window.open().document.write(container.innerHTML);
};

希望这能有所帮助！React-pdf是一个很棒的，用户友好的库。

赞(0）回复(0）举报 2022-12-22

ars1skjm2#

这个错误是由于您导入PDF文件时把它当作一个JS模块而引起的。您应该在服务器上将PDF文件作为静态文件，并使用静态文件URL来显示/下载它。

赞(0）回复(0）举报 2022-12-22