1

我使用 create-react 应用程序构建了一个反应应用程序，该应用程序使用 react-pdf 显示 pdf。当我输入引用磁盘上文件的文件名但输入 url 时出现“加载 PDF 失败”错误时，这工作正常。我尝试了多个网址，但都失败了。在控制台中，我还收到以下警告，从一些谷歌搜索似乎是指 webpack 不兼容，尽管无论我试图显示的文件类型如何，我都会得到它：

./node_modules/pdfjs-dist/build/pdf.js 关键依赖：require函数的使用方式不能静态提取依赖

我正在使用以下版本：react-pdf (4.1.10)、reacts-scripts (3.0.1) webpack (4.29.6)、react (16.12.0)。

我还按照建议在我的代码顶部完成了以下导入等：

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

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

似乎其他人也遇到过这个问题，但很难找到解决方案。我要显示的文件示例是：file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"

任何帮助表示赞赏！

4

1 回答 1

2

我不知道它是否仍然有帮助，但我今天遇到了这个问题。解决方案是将对象传递给组件file内的道具Document。

<Document
    file={{
      url:
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    }}
    onLoadSuccess={onDocumentLoadSuccess}
>
于 2020-08-07T14:43:51.540 回答