在react-pdf中显示pdf时出错

Question

我是新手，我正在尝试在浏览器上显示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();

错误截图

Answer 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`;
    }

Answer 2

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

如果您的文件结构如下：

• SRC
  • App.js
  • 部件
    • ShowPdfComponent.js
    • 次数1.pdf
• 公共
  • bundle.js

然后您需要将1.pdf移动到public文件夹，如下所示：

• SRC
  • App.js
  • 部件
    • ShowPdfComponent.js
• 公共
  • bundle.js
  • 次数1.pdf

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

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

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

Answer 3

您可以使用 import samplePdf from './1.pdf' 导入 pdf 文件，并且可以像 file={samplePdf} 一样直接在您的文档标签中使用。