在 NextJS 应用程序中渲染本地 PDF 时遇到问题

Question

我试图在反应组件中显示我的简历（本地文件），但在导入它时遇到了问题。

import myResume from '../assets/pdfs/myResume.pdf'只是给了我错误：

找不到模块“../assets/pdfs/myResume.pdf”或其相应的类型声明.ts(2307)

如果我尝试像这样使用导入：

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

export default Resume

它给了我一个编译失败的错误：

./assets/pdfs/myResume.pdf 模块解析失败：意外标记 (1:0) 您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）

我也尝试过使用 React-pdf 包，但结果相同。

Answer 1

实际上找到了一个解决方法，不确定这是否是正确的方法，但我只需将 src 放在 iframe 中就可以让它工作。

所以而不是

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

我已经做了

function Resume() {
  return (
    <iframe src='/assets/pdfs/myResume.pdf' />
  )
}

这似乎运作良好。

Answer 2

如果您想react-pdf与 Nextjs 一起使用，使其工作的一种方法是使用以下命令pdf.worker.js从 CDN 中提取：

import {pdfjs, Document, Page} from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`

然后，它似乎可以与您导入的 PDF 或文件的任何 URL 一起正常工作。例如，

<Document file={myResume}>
    <Page pageIndex={0}/>
</Document>

参考： https:
//github.com/wojtekmaj/react-pdf/issues/136
https://www.npmjs.com/package/react-pdf

Answer 3

将文件放入public文件夹中。

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，例如图像。然后，您的代码可以从基本 URL (/) 开始引用公共内部的文件。

例如，如果您将 pdf 添加到 public/resume.pdf，则以下代码将访问该 pdf：

<Link href="/FirstName_LastName_Resume.pdf">
   <Text>Hire Me?</Text>
</Link>