Полноценный просмотрщик PDF. js в React

Question

Я собираюсь использовать полнофункциональный PDF. js в компоненте React в проекте Next. js, как показано в Firefox и как на этой онлайн-демонстрации . Некоторые важные функции здесь - возможность перейти к определенному номеру страницы, набрав его и выполнив поиск текста в PDF. Есть ли для этого компонент React?

Библиотека response-pdf удобна для визуализации одной страницы, но не предоставляет панель инструментов или удобный способ ленивой загрузки страниц в прокручиваемое представление.

Аналогично вопросам Как использовать полный PDF. js средство просмотра с панелью инструментов в веб-пакете и Vuejs? (где принятый ответ обеспечивает компонент Vue ) и Embed Full Mozilla pdf. js Просмотрщик в vue. js (с использованием веб-пакета через vue -cli) , но для React. js.

Я попытался включить /web/viewer.html как часть внутреннего HTML компонента React, выполнив следующее, но это не сработало.

1. Загрузите последний выпуск и извлеките его в папку моего проекта Next. js (который я назвал pdfjs). Я пробовал несколько папок, таких как / client, / client / components, / pages, / node_modules и /.
2. Run npm install --save-dev html-loader
3. Используйте этот загрузчик Webpack, который анализирует файлы HTML , изменив next.config.js на следующее:

module.exports = {
  // …
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.html$/,
      exclude: /node_modules/,
      use: { loader: 'html-loader' }
    });
    return config;
  },
}

Создайте простую страницу в / pages следующим образом:

import React from 'react';
import PdfViewer from '../pdfjs/web/viewer.html'

export default function () {
  return (
    <div className="content" dangerouslySetInnerHTML={{ __html: PdfViewer }} />
  );
};

После запуска next в терминале для запуска сервера разработки и перехода на эту страницу в браузере, я получаю сообщение об ошибке «1060 * куча исчерпывает память».

Даже если на моем компьютере было достаточно памяти, я не уверен, что это фактически приведет к рендерингу PDF - не говоря уже об опасности использования dangerouslySetInnerHTML. Похоже, что лучшим решением, вероятно, было бы иметь реальный компонент React, а не пытаться внедрить файл HTML.

Answer 1

Я думаю, что это может быть больше того, что вы после. Я уже обернул его в компонент для вас, но это средство просмотра документов, которое может просматривать документы PDF без особых усилий.

import  React,{  Component } from 'react';
import ReactDOM from 'react-dom';


class DocView extends React.Component{

    constructor(props){
        super(props);
    }

    render(){
        var url = "https://docs.google.com/viewerng/viewer?url="+this.props.src+"&embedded=true";
        return(
            <iframe style={this.props.style} src={url}></iframe>
        );
    }
}

export default DocView;