NodeJS 使用React-pdf，按照说明操作，但仍然无法加载,如何修复此错误？

kmb7vmvb 于 2023-01-01 发布在 Node.js

关注(0)|答案(5)|浏览(273)

我一直遵循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;

这里是我的目录和文件一起!

node.js

来源：https://stackoverflow.com/questions/53074484/using-react-pdf-followed-instructions-but-still-does-not-load-how-to-fix-this

5条答案

按热度按时间

oyt4ldly1#

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语句中添加最后一行。对我来说效果很好。

赞(0）回复(0）举报 2023-01-01

8yparm6h2#

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

赞(0）回复(0）举报 2023-01-01

g6ll5ycj3#

你的webpack配置中有配置文件加载器吗？

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

我使用的是文件加载器3.0.1，我可以从我的文件系统加载PDF文件。
当然，您还需要在顶部导入它，如下所示：

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

赞(0）回复(0）举报 2023-01-01

qeeaahzv4#

我面对这个问题，并在这里找到了解决方案https://github.com/wojtekmaj/react-pdf/issues/321。
第一个月
将其添加到构造函数中。

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

赞(0）回复(0）举报 2023-01-01

ffscu2ro5#

所有这些答案也没有解决我的问题。我发现我必须将我的pdf文件夹移到公用文件夹中才能修复。希望这也能解决您的问题。

赞(0）回复(0）举报 2023-01-01