我想使用react-pdf
在我的下一个应用程序中显示公共文件夹中的PDF文件,但我一直收到PDF未找到错误-这是我的设置:
// pdf component
import { pdfjs, Document, Page } from "react-pdf";
import pdf from '../../public/document.pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.js',
import.meta.url,
).toString();
// pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
const PDFViewer = () => (
<Document file={pdf}>
<Page />
</Document>
)
我导入这个组件用于我的主组件,如下所示:
import dynamic from "next/dynamic";
const PDFViewer = dynamic(() => import('@/components/PDFViewer'), { ssr: false })
export default function Main() {
return (
<div>
<PDFViewer />
</div>
)
}
在next.config.js
中,我尝试配置raw-loader
包来加载PDF文件,如下所示:
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.(pdf)$/i,
loader: 'file-loader',
options: {
name: './public/document.pdf'
}
})
}
return config
}
文件夹结构如下所示:
- 项目
- 组件
- 页
- 公共
- document.pdf
- 类型
- next.config.js
这是我在控制台得到的消息:
警告:MissingPDFException:缺少PDF“http://localhost:3000/_next/public/document.pdf”。
如何纠正这种情况?
1条答案
按热度按时间0lvr5msh1#
我遇到了同样的问题,我决定不使用react-pdf来解决它。我在下一个. config.js中修改了webpack:
由于Next.js无法识别pdf文件,我还创建了一个名为types.d.ts的文件并添加了以下内容:
declare module "*.pdf";
我希望它能帮助