时间戳

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

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

问题描述

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

这是我的目录和文件！

在此处输入图像描述

标签： htmlnode.jsreactjspdf

解决方案

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

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

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

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

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

推荐阅读