使用 React-pdf，按照说明进行操作，但仍然无法加载。如何修复此错误？答案

【问题标题】：Using React-pdf, followed instructions but still does not load. How to fix this error?使用 React-pdf，按照说明进行操作，但仍然无法加载。如何修复此错误？
【发布时间】：2020-12-12 04:14:38
【问题描述】：

我一直关注this 在我的网站上查看我的 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;

这是我的目录和文件！

【问题讨论】：

我不确定，但我认为它不需要文件路径，而是需要发送请求的 URL。尝试将resume.pdf 放在public 目录中，改写file='/resume.pdf'。
试过了，结果一样:(
将文件添加到public目录后尝试重新启动服务器。
还是什么都没有。我确实收到了编译警告，比如：
require 函数的使用方式是无法静态提取依赖项...（对于 ...build/pdf.jf）

标签： html node.js reactjs pdf

【解决方案1】：

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 语句。对我来说效果很好。

【讨论】：

【解决方案2】：

我遇到了一个问题，组件只是说它正在加载 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' }}
      />)
  }

【讨论】：

【解决方案3】：

你的 webpack 配置中是否配置了文件加载器？

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

我使用的是文件加载器 3.0.1，我可以很好地从我的文件系统加载 PDF。

您当然还需要像这样在顶部导入它：

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

【讨论】：

【解决方案4】：

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

【讨论】：