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

Question

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

\n

\n

./public/pdf.pdf 模块解析失败：意外的标记 (1:0) 您可能\n需要适当的加载程序来处理此文件类型，目前\n没有配置加载程序来处理此文件。请参阅
\n> %PDF-1.3
\n| %\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd
\n|

\n

\n

我怎么解决这个问题？

\n

我的代码：

\n

import FileViewer from "react-file-viewer/src/components";\nimport pdf from "../../../public/pdf.pdf"\n\n...(in component)\n\n {openFileViewer ? <FileViewer fileType="pdf" filePath={pdf}  /> : null}\n

\n

Answer 1

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

您还需要确保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" />
    );
};