Используя 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;

Вот мой каталог и файлы вместе с ним!

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

Я не уверен, но не думаю, что ему нужен путь к файлу, а нужен URL-адрес для отправки запроса. Попробуйте поместить resume.pdf в каталог public и вместо этого записать file='/resume.pdf'.

— 31.10.2018 01:01

попробовал, результат тот же :(

— 31.10.2018 01:02

Попробуйте перезапустить сервер после того, как вы добавили файл в каталог public.

— 31.10.2018 01:02

еще ничего. я получаю предупреждения о компиляции, в которых говорится что-то вроде:

— 31.10.2018 01:04

Функция require используется таким образом, что зависимости не могут быть извлечены статически ... (для ... build / pdf.jf)

— 31.10.2018 01:05

html node.js reactjs pdf

31.10.2018 00:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

4 776

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

У меня проблема, когда компонент просто говорит, что загружает 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.info("No Data was found")}
      onLoadError = {(error) => alert('Error while loading document! ' + error.message)}
      file = {{ url: 'http://localhost:3000/resume.pdf' }}
      />)
  }

12.12.2018 05:48

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

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

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

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

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

08.01.2019 21:03

Я столкнулся с этой проблемой и нашел решение здесь 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`;
    }

02.04.2020 20:35

Ответ принят как подходящий

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

Добавьте последнюю строку в оператор импорта. Хорошо сработало для меня.

11.12.2020 21:14