前端渲染pdf文件解决方案

一、前言

在当今数字化信息传播的时代,PDF文档作为一种常见的文件格式扮演着重要的角色。对于前端开发者而言,实现在网页上渲染和展示PDF文件是一项常见但也具有挑战性的任务。幸运的是,现在有一个强大的工具------@react-pdf-viewer,能够帮助我们轻松实现前端PDF文件的渲染。本文将介绍@react-pdf-viewer的使用方法,让您轻松掌握前端渲染PDF的技巧,为您的项目增添新的可能性。让我们一起探索这个令人惊叹的前端PDF渲染工具,为您的网页带来更多可能性吧!

二、简介

1、@react-pdf-viewer介绍

@react-pdf-viewer 是一个基于 pdfjs封装的 React PDF 阅读器组件库,提供了在 React 应用中展示和操作 PDF 文件的功能。用户可以通过该组件库轻松地在自己的应用中展示 PDF 文件,并实现诸如查看、搜索、缩放、打印等基本操作。

官网:A React component to view PDF documents - React PDF Viewer

注意:License需要花钱购买

2、插件版本参数

|----------------------------------|-----------|
| 插件 | 版本 |
| Node | v22.13.0 |
| @types/react | ^18.0.33 |
| @types/react-dom | ^18.0.11 |
| @react-pdf-viewer/core | ^3.12.0 |
| @react-pdf-viewer/default-layout | ^3.12.0 |
| pdfjs-dist | 3.6.172 |

三、安装

bash 复制代码
npm install pdfjs-dist@3.4.120 --save

npm install @react-pdf-viewer/core@3.12.0

四、引入**@react-pdf-viewer**提供的webworker线程

注:pdfjs的使用Web Worker来处理大部分需要时间的任务,例如解析和呈现PDF文档。pdfjs版本必须与其对应的web work对应,

javascript 复制代码
import { Worker } from '@react-pdf-viewer/core';

<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
    <!-- viewer 组件需要插入到这里 -->
    ...
</Worker>

使用技巧:

1、web worker文件的加载

【1】方式一:使用CDN方式获取地址:

通过pdfjs-dist提供的'version'获取与其匹配的web worker

javascript 复制代码
import * as pdfjsLib from 'pdfjs-dist';
const workerUrl = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

【2】方式二:下载web worker至本地,workerUrl地址替换为本地地址

2、如果您在不同的页面中使用查看器组件,建议将Worker放在布局级别,多个Views共用一份web worker就行。

例如,在典型的React应用程序中,可以放在App层,如下所示:

javascript 复制代码
const App = () => {
    return <Worker workerUrl="https://unpkg.com/pdfjsdist@3.4.120/build/pdf.worker.min.js">...</Worker>;
};

五、功能实现

1、渲染PDF文件

【1】本地文件渲染

javascript 复制代码
import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';
import * as pdfjsLib from 'pdfjs-dist';
const pdfUrl = '/财务报告.pdf';
const workerUrl = `/pdf.worker.min.js`;
const ViewPDF= () => {
  return <>
    <div style={{ height: '100vh' }}>
      <Worker workerUrl={workerUrl}>
        <Viewer fileUrl={pdfUrl} ></Viewer>
      </Worker>
    </div>
  </>
};
export default ViewPDF;

【2】服务端文件渲染

2、搜索+高亮

javascript 复制代码
import './index.less';
import { Button } from 'antd';
import { useState, useEffect } from 'react';

import { Worker, Viewer } from '@react-pdf-viewer/core';
import { searchPlugin } from '@react-pdf-viewer/search';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
const pdfUrl = '/财务报告.pdf';
const workerUrl = `/pdf.worker.min.js`;

const ViewPDFSearch = () => {
  const [searchText, setSearchText] = useState('');

  // 初始化搜索插件
  const searchPluginInstance = searchPlugin({
    keyword: searchText, // 默认搜索关键词
    onHighlightKeyword: (props: any) => {
      const { highlightEle } = props;
      highlightEle.style.backgroundColor = 'rgba(255, 255, 0, 0.4)'; // 设置高亮元素的背景颜色
      highlightEle.style.color= 'black'
    },
  });
  const { highlight } = searchPluginInstance;
  const handleSearch = () => {
    if (!searchText) return;
    highlight(searchText)
  };
  
  return <>
      <div>
      <h1>PDF 搜索</h1>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
        placeholder="输入要搜索的内容"
      />
        <Button onClick={handleSearch}>搜索</Button>
      <div>
      <div style={{ height: '100vh' }}>
        <Worker workerUrl={workerUrl}>
          <Viewer fileUrl={pdfUrl} 
          plugins={[
            searchPluginInstance, // 搜索插件  
          ]} // 注册插件
          />
        </Worker>
      </div>
      </div>
     </div>
    </>
};


export default ViewPDFSearch;

效果:

相关推荐
前端小巷子36 分钟前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了40 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉3 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
VB59411 小时前
《考研 考证 各学科 各专业 思维导图汇总》PDF 5.2GB
考研·pdf
hui函数12 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam13 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的15 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite