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

dfuffjeb 于 2023-01-30 发布在 React

关注(0)|答案(4)|浏览(224)

我尝试在react组件中显示我的简历（本地文件），但是在导入时遇到了问题。
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包，但结果是一样的。

reactjs

来源：https://stackoverflow.com/questions/71669274/having-trouble-rendering-a-local-pdf-within-a-nextjs-app

4条答案

按热度按时间

1szpjjfi1#

实际上找到了一个变通方法，不确定这是否是正确的方法，但我能够让它工作，只要把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' />
  )
}

看起来效果不错。

赞(0）回复(0）举报 2023-01-30

yvt65v4c2#

如果您想在Nextjs中使用react-pdf，一种方法是使用以下命令从CDN中拉取pdf.worker.js：

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

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

那么它似乎可以很好地与任何URL的PDF或文件导入，因为你做了。例如，

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

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

赞(0）回复(0）举报 2023-01-30

suzh9iv83#

接下来js会在public文件夹中查找文件，将assets文件夹放入public文件夹中，然后像这样使用：src =“/assets/pdfs/myResume.pdf”。并且不要在路径中包含公共文件夹，因为它会自动在公共文件夹中查找它。

赞(0）回复(0）举报 2023-01-30

mf98qq944#

将文件放入public文件夹。
Next.js可以在根目录中名为public的文件夹下提供静态文件，如图像，然后代码可以从基URL（/）开始引用public中的文件。
例如，如果将pdf添加到public/resume.pdf，则以下代码将访问该pdf：

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

赞(0）回复(0）举报 2023-01-30

我来回答

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

4条答案

相关问题

热门标签

最新问答