Question

我已经使用create-react应用程序构建了一个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”

任何帮助表示赞赏！

Answer 1

我不知道它是否仍然有用，但是我今天在这个问题上苦苦挣扎。解决方案是将一个对象传递到file组件内部的Document prop。

<Document
    file={{
      url:
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    }}
    onLoadSuccess={onDocumentLoadSuccess}
>

react-pdf从磁盘加载文件但不从URL加载

1 个答案: