在react-pdf中显示pdf时出错

Question

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

应用程序.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;

索引.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

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

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

因为它在底层使用了 webpack。

Answer 3

要使用 webpack 来使用react-pdf，请使用下面的代码片段。

import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Answer 4

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

如果您有如下文件结构：

• 源文件
  • 应用程序.js
  • 成分
    • ShowPdfComponent.js
    • 1.pdf
• 民众
  • 包.js

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

• 源文件
  • 应用程序.js
  • 成分
    • ShowPdfComponent.js
• 民众
  • 包.js
  • 1.pdf

因为当您编译的 javascript 代码正在执行public/bundle.js并且bundle.js不知道如何进入src/components/1.pdf文件系统时。

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

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