React 中成熟的 PDF.js 查看器

Question

我希望在Next.js项目的 React 组件中使用功能齐全的PDF.js，如 Firefox 和此在线演示所示。这里的一些重要功能是能够通过键入并在 PDF 中搜索文本来导航到某个页码。是否有可用的 React 组件？

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

类似于问题如何在 webpack 和 Vuejs 中使用带有工具栏的完整 PDF.js 查看器？（其中接受的答案提供了一个 Vue 组件）和在 vue.js 中嵌入完整的 Mozilla pdf.js 查看器（通过 vue-cli 使用 webpack），但对于 React.js。

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

1. 下载最新版本并将其解压缩到我的 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;