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

Question

我想在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}

- E Sargsyan

---

你不能像导入模块一样导入PDF文件。你尝试直接在 filePath 属性中传递路径了吗？我猜你也可以直接在属性中传递 pdf.pdf，因为它在公共文件夹中。 - kausko

Answer 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" />
    );
};

- juliomalves

Answer 2

在Next.js中，您仍然可以导入.pdf文件，而无需使用第三方模块，只需使用HTML标签<iframe>即可。

如果您将文件上传到云存储（例如Google Drive、Dropbox、S3等），则可以将其链接嵌入到您的网站中，如下所示：

const PreviewFile = () => {
  return (
    <iframe
      src="https://drive.google.com/file/d/11h3WlhD221wMuXyXWPsdmXb4UNM-qaot/preview"
      title="Async & Performance"
      width="800"
      height="600"
    />
  )
}

请注意，此处使用的是 Google Drive 的嵌入链接而非您点击“共享”按钮后获得的链接。如下所示：

- Jood80