Используя React-pdf, следуйте инструкциям, но все равно не загружается. Как исправить эту ошибку?

Question

Я следил за этим , чтобы посмотреть мой 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

У вас настроен загрузчик файлов в конфигурации вашего веб-пакета?

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

Я использую загрузчик файлов 3.0.1 и могу нормально загружать PDF-файлы из моей файловой системы.

Вам также, конечно, нужно импортировать его вверху, например:

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

Answer 2

У меня проблема с тем, что компонент просто говорит, что загружает PDF, но никогда не загружается - никаких сообщений об ошибках, ничего. Но для справки, вот важные части моего компонента. Обратите внимание, что я следовал их инструкциям, React 16.6+, и это для доступа к PDF через URL:

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' }}
      />)
  }