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

【问题标题】：How to import PDF file with react-file-viewer in Next.js?如何在 Next.js 中使用 react-file-viewer 导入 PDF 文件？
【发布时间】：2021-09-02 21:55:44
【问题描述】：

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

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

我该如何解决这个问题？

我的代码：

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

...(in component)

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

【问题讨论】：

您不能像模块一样导入 PDF。您是否尝试过直接在 filePath 属性中传递路径？我想你也可以直接在 prop 中传递pdf.pdf，因为它在 public 文件夹中。

标签： reactjs next.js

【解决方案1】：

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

您还需要确保 react-file-viewer 仅在浏览器中导入，因为它依赖于 window 的存在才能正常工作。您可以通过next/dynamic 和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" />
    );
};

【讨论】：