如何在 Next.js 中使用react-file-viewer导入PDF文件？

我想在 Next.js 中使用文件查看器，但收到此错误：

./public/pdf.pdf 模块解析失败：意外的标记 (1:0) 您可能 需要一个合适的加载器来处理这种文件类型，目前没有 加载程序配置为处理此文件。看
>%PDF-1.3
| %����
|

我怎么解决这个问题？

my code:

import FileViewer from "react-file-viewer/src/components";
import pdf from "../../../public/pdf.pdf"

...(in component)

 {openFileViewer ? <FileViewer fileType="pdf" filePath={pdf}  /> : null}

由于您的 PDF 文件位于public文件夹中，您可以直接在其中引用图像的路径filePath prop.

您还需要确保react-file-viewer仅在浏览器中导入，因为它取决于window在场才能正常工作。您可以通过动态导入组件来做到这一点next/dynamic with ssr: false.

import dynamic from 'next/dynamic';

const FileViewer = dynamic(() => import('react-file-viewer'), {
    ssr: false
});

export default function Index() {
    return (
        <FileViewer fileType="pdf" filePath="/pdf.pdf" />
    );
};