按照说明使用React-pdf，但仍然无法加载。如何解决这个错误？

Question

我一直在跟踪http://www.hytime.org/tools/index.html在我的网站上查看我的pdf文件，由于某种原因它无法加载，而且我不确定自己做错了什么。

这是我的代码，

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

class Resume extends Component {
  constructor(props){
    super(props);

    this.state = {
      numPages: null,
      pageNumber: 1
    }
  }

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

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

    return (
      <div>
        <Document
          file = '../files/resume.pdf'
          onLoadSuccess = {this.onDocumentLoad}
          >
            <Page pageNumber = {pageNumber} />
        </Document>
        <p> Page {pageNumber} of {numPages}</p>
      </div>

    );
  }
}

export default Resume;

这是我的目录和文件！

Answer 1

我遇到了一个问题，该组件只是说正在加载pdf，但从未真正加载-没有错误消息，什么也没有。但仅供参考，这是我组件的重要部分。请注意，我遵循他们的指令React 16.6+，这是通过URL访问PDF的方法：

import { Document } from 'react-pdf/dist/entry.webpack';
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;



  render () {
    return (<Document 
      // noData={console.log("No Data was found")}
      onLoadError={(error) => alert('Error while loading document! ' + error.message)}
      file={{ url: 'http://localhost:3000/resume.pdf' }}
      />)
  }

Answer 2

您是否在Webpack配置中配置了文件加载器？

{
    test: /\.pdf$/,
    use: 'file-loader?name=[path][name].[ext]',
},

我正在使用文件加载器3.0.1，也可以从文件系统中加载PDF。

您当然也需要像这样将其导入顶部：

import resume from '../files/resume.pdf';

Answer 3

我遇到了这个问题，并在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 4

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

在import语句中添加最后一行。对我来说很好。