REACT PDF: нельзя использовать пакеты для отображения статического файла PDF

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

реагировать-pdf

реагировать-pdf-js

реагировать PDF-JS-бесконечный

простой-реагировать-pdf

pdfjs-dist

реагировать-pdf-страницы

Они часто говорят, что мы можем легко использовать URL-адрес или файл pdf для реквизита для компонента PDF, но я не могу использовать ни то, ни другое.

У меня было две основных ошибки.

  1. Поскольку я хочу использовать myPDF для свойств компонента, я пишу следующее:

    импортировать myPDF из 'path / to / pdf_file';

затем render_some_component pdf: {myPDF}

Вот ошибка:

Ошибка ModuleParseError в синтаксическом анализе модуля: неожиданный токен (1: 0). Для обработки этого типа файла может потребоваться соответствующий загрузчик. (Исходный код для этого двоичного файла опущен)

(Когда я прокомментирую эту строку, такая ошибка исчезает)

Я использовал загрузчик файлов в конфигурации webpack, я пробовал много разных способов, но потерпел неудачу.

  1. Я использую файл pdf непосредственно для таких реквизитов:

    render_some_component pdf: {'путь / к / pdf_file'}

    • In the Console:

Предупреждение: настройка поддельного воркера.

11: 23: 55.962 pdf.worker.js: 349 Предупреждение. Игнорирование недопустимого символа «33» в шестнадцатеричной строке.

11: 23: 55.963 pdf.worker.js: 349 Предупреждение: игнорирование недопустимого символа «79» в шестнадцатеричной строке

... Есть много таких "Игнорирование недопустимого символа", и оно всегда заканчивается:

localhost /: 1 Неперехваченное (в обещании) InvalidPDFException {имя: "InvalidPDFException", сообщение: "Недопустимая структура PDF"}

  • В Сети, Заголовки, я вижу:

URL-адрес запроса: http://localhost:3000/myPdfFile.pdf

Метод запроса: ПОЛУЧИТЬ

Код состояния: 200 ОК

Удаленный адрес: 127.0.0.1: 3000

  • но в Сети, Ответе, я вижу только макет HTML.

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

За исключением двух основных ошибок, у меня была еще одна ошибка, связанная с Worker, используемым в пакетах, но я не знаю, как ее исправить:

Неперехваченное исключение DOMException: не удалось создать рабочий

(Это связано с Chrome, поскольку люди говорят, что Chrome не разрешает Worker на локальном сервере)

Любая помощь приветствуется, так как я застрял в этом уже через 4 дня.


reactjs pdf webpack-file-loader importerror relative-path
person Mimi Nguyen    schedule 04.02.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Не могли бы вы прояснить, в чем ваша основная задача? Если я правильно понял, вы хотите отобразить файл PDF, который уже существует в части вашего приложения? Вы не хотите создавать новый PDF-файл с помощью JavaScript.

Если вы хотите просто показать PDF-файл, пробовали ли вы использовать iframe? Что-то вроде этого:

<iframe
   title="file"
   style={{ width: '100%', height: '100%' }}
   src={downloadURL}
/>

Здесь вы также можете использовать относительные пути к файлу из того места, где находится ваш Компонент, или использовать полные URL-адреса к файлу.

person Tarik Huber    schedule 05.02.2018
comment
У меня это работает как волшебство! Большое спасибо, Тарик. Было жаль, что я искал только несколько пакетов в формате pdf. - person Mimi Nguyen; 06.02.2018
comment
Я могу использовать URL-адрес файла на локальном сервере. Я не могу использовать относительный путь к файлу из того места, где находится мой компонент. Таким образом, он не может показать статический PDF-файл на сервере Heroku. Поскольку я использую Django в бэкэнде, я думаю о настройке Django, обслуживающего статический файл, чтобы иметь возможность иметь URL-адрес с сервера Heroku для обеспечения iframe. Есть ли лучшее решение? @Tarik, вам нужно использовать какой-нибудь загрузчик для файла pdf в веб-пакете, чтобы иметь возможность использовать относительный путь? - person Mimi Nguyen; 07.02.2018
comment
Вам нужно будет использовать загрузчик. Ознакомьтесь с stackoverflow .com / questions / 36643649 / PDF-файл должен быть вызван из вашего кода, если вы используете относительный путь, или через Интернет, если вы вызываете его по URL-адресу, поэтому оба ваших предложения должны работать. Вам просто нужно выбрать тот, который больше всего соответствует вашим потребностям. - person Tarik Huber; 08.02.2018
comment
Спасибо за ссылку, @Tarik. Я уже пробовал эту ссылку и некоторые другие, но мне это не удалось. Итак, я снова застрял в настройке некоторого загрузчика файлов для файла PDF. Я пытаюсь установить Django PDF, обслуживающий сейчас. - person Mimi Nguyen; 13.02.2018
comment
Идеальное решение. Спасибо большое! В пакете response-pdf нет адекватного руководства по отправке данных из серверной части. - person Alexander Shubert; 30.03.2020