React中全面的PDF.js查看器

Question

我正在PDF.js项目的React组件中使用功能齐全的Next.js，如Firefox和this online demo所示。此处的一些重要功能是能够通过输入特定页码并在PDF中搜索文本来导航到该页码。是否有可用的React组件？

react-pdf库非常适合呈现单个页面，但是它不提供工具栏或方便的方式在可滚动视图中延迟加载页面。

类似于问题How to use full PDF.js viewer with toolbar in webpack and Vuejs?（接受的答案提供了Vue组件）和Embed Full Mozilla pdf.js viewer in vue.js ( using webpack via vue-cli )，但适用于React.js。

我通过执行以下操作，尝试将/web/viewer.html包含为React组件的内部HTML的一部分，但没有成功。

1. 下载latest release并将其解压缩到我的Next.js项目（我称为pdfjs）的文件夹中。我尝试了几个文件夹，例如/ client，/ client / components，/ pages，/ node_modules和/。
2. 运行npm install --save-dev html-loader
3. 通过将next.config.js更改为以下内容，使用此用于解析HTML文件的Webpack加载器：

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

4. 在/ pages下创建一个简单页面，如下所示：

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

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

5. 在终端中运行next以启动开发服务器并在浏览器中导航到该页面后，我收到有关JavaScript堆内存不足的错误。

即使我的计算机有足够的内存，我也不确定这是否会导致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;