在 react-pdf 中显示 pdf 时出错答案

【问题标题】：error in displaying pdf in react-pdf在 react-pdf 中显示 pdf 时出错
【发布时间】：2018-07-13 08:06:10
【问题描述】：

我是新手，我正在尝试在浏览器上显示一个 pdf 文件。我收到了一个错误，因为无法加载 PDF。我正在尝试运行https://www.npmjs.com/package/react-pdf 中给出的示例程序。

App.js

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

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="./1.pdf"
          onLoadSuccess={this.onDocumentLoad}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      </div>
    );
  }
}

export default MyApp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

错误截图

【问题讨论】：

您不能在浏览器中运行的应用程序中引用本地文件系统上的文件。它根本无法访问您的文件系统。否则，任意网站都可能访问您计算机上的文件。这就是./somePath 无法工作的原因。您的本地 Web 服务器需要在相对于您的主机地址的特定路径下提供该文件，例如/media/1.pdf 或只是 1.pdf，具体取决于文件在服务器上的位置以及 Web 服务器的配置方式。
可能是文档路径：file="./1.pdf"。这看起来像一个服务器端路径。尝试对文件使用绝对或相对 URL，并确保浏览器可以下载文件。打开开发者工具，检查网络选项卡，确保正在发送下载文件的请求，并且文件下载成功。

标签： reactjs npm

【解决方案1】：

问题很旧，但希望这对某人有所帮助。我遇到了这个问题，并在这里找到了解决方案https://github.com/wojtekmaj/react-pdf/issues/321。

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

将此添加到您的构造函数中。

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

【讨论】：

【解决方案2】：

您使用file="./1.pdf" 加载文件我相信这可能是问题所在。

如果你有这样的文件结构：

源
- App.js
- 组件
  - ShowPdfComponent.js
  - 1.pdf
公开
- bundle.js

然后您需要像这样将1.pdf 移动到public 文件夹：

源
- App.js
- 组件
  - ShowPdfComponent.js
公开
- bundle.js
- 1.pdf

因为当您编译的 javascript 代码从 public/bundle.js 执行时，bundle.js 不知道如何到达文件系统中的 src/components/1.pdf。

如果您使用的是webpack 和webpack-dev-server，生产/开发环境之间也可能存在差异。

查看react-pdf 示例。它具有平面文件结构。这就是它起作用的原因。

【讨论】：

如果文件属性包含来自公共 pdf 的 url，如 africau.edu/images/default/sample.pdf？使用上面的 url 时出现同样的错误。

【解决方案3】：

您可以使用import samplePdf from './1.pdf' 导入pdf 文件，也可以直接在您的Document 标签中使用file={samplePdf}。

【讨论】：

【解决方案4】：

如果您使用的是 create-react-app，那么您需要以不同的方式导入

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'

因为它在底层使用了 webpack。

【讨论】：