前端 pdf 预览解决方案(定位,高亮,页面切换,样式定制)
创始人
2025-01-16 12:33:43
0

前言

PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库,用于在网页上解析和渲染 PDF 文件。它不依赖于任何外部服务器或插件,可以在浏览器中直接运行。PDF.js 支持多种平台和设备,包括桌面、移动设备和嵌入式

环境:浏览器端 

技术选型:pdf.js

下载地址:pdf.js稳定版

一.介绍

1.pdf.js目录

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

2.方案

        预览方式

        pdf.js 提供了多种pdf预览方式,本文采用iframe预览方式,即单独部署pdf.js作为一个预览网站,生产环境使用iframe时传入pdf文件地址即可实现预览    

        在项目页面里添加代码:

        通信

        由于需要在主项目里实现一些特殊的pdf操作,故选用postMessage 对内嵌的iframe进行数据通信来实现各种操作,由于涉及跨域通信,需要后端同事做一下cos跨域处理即可

        页面切换
// pdf.js 应用 暴露 PDFViewerApplication 实例 改写属性 window.PDFViewerApplication.page = targetPage 
        文字高亮
// pdf.js 应用 暴露 PDFViewerApplication 实例 触发文字搜索时间,高亮文字 window.PDFViewerApplication.findBar.findField.value = value; window.PDFViewerApplication.findBar.highlightAll.checked = true; window.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');
        页面高度定位
// pdf.js 应用 暴露 PDFViewerApplication 实例 改写属性 window.PDFViewerApplication.scrollTop = scrollTop 
         样式、ui定制

        pdf.js 的dom结构在viewer.html文件,样式在viewer.css文件,改写需要的UI即可

3.优势

  1. 减少主项目体积压力
  2. 定制化改pdf.js更方便
  3. 多项目可真接复用

二.技术实现

1.添加数据通信

新建messageHandler.js文件,插入pdf应用中用于接收来自主应用的操作指令,文件代码如下:

window.addEventListener('message', function (message) {   const { data } = message;   const { type, value } = data;   switch (type) {     // 页面切换     case 'SET_PAGE':       window.PDFViewerApplication.page = value;       break;     // 高亮文本     case 'HIGHT_LINE':       window.PDFViewerApplication.findBar.findField.value = value;       window.PDFViewerApplication.findBar.highlightAll.checked = true;       window.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');       break;     // 页面高度定位     case 'SET_TOP':       document.getElementById('viewerContainer').scrollTop = document.getElementById('viewerContainer').scrollTop+c_urlArray['top']*1;     default:       break;   } });

将该文件添加到预建包的web目录下,再在web目录下的viewer.html文件里插入一下代码:

 	 		 		 		 		 		PDF.js viewer 		 		 		 		 		          // 这是要插入的代码 		   	 ···· 

 此时pdf应用已支持处理主应用的pdf操作事件,部署到服务器即可,不要忘记叫后端同事处理一下跨域

2.部署pdf预建包

此过程可能会遇见部署后,访问请求不到部分资源问题,这是因为部署时,配置的根目录不对,正确的根目录在web文件夹的父级,慢慢来,不要急

3.主包预览

        插入代码

注意这里的src地址必需为:你部署的Ips地址+ /pdf/web...拼接而成,不然会引起代码里的文件资源会混乱,所有步骤2中正确的根目录在web文件夹的父级,这个/pdf/web里pdf文件夹是我自己起的名字,你可以自由更改这个文件夹的名字

参数说明:

  1. page 预览pdf时的初始页码
  2. top 预览pdf文件时的初始页面高度
  3. zoom 预览pdf文件时的初始页面大小比例
  4. file 你需要预览的pdf文件地址
        pdf操作实例
const iframe = document.getElementById('pdfPreview') as HTMLIFrameElement;  // 切换页面   iframe.contentWindow?.postMessage({ type: 'SET_PAGE', value: targetPageNo },'*'); // 高亮文本  iframe.contentWindow?.postMessage({ type: 'HIGHT_LINE', value: targetText},'*'); // 页面高度定位 iframe.contentWindow?.postMessage({ type: 'SET_TOP', value: targetTop},'*');

此时,你的主应用以支持调用pdf的基本操作

4.UI定制

        调整viewer.css和viewer.html文件里的代码,也可以直接引入各种库,来装饰你的pdf应用 

相关内容

热门资讯

一分钟内幕!科乐吉林麻将系统发... 一分钟内幕!科乐吉林麻将系统发牌规律,福建大玩家确实真的是有挂,技巧教程(有挂ai代打);所有人都在...
一分钟揭秘!微扑克辅助软件(透... 一分钟揭秘!微扑克辅助软件(透视辅助)确实是有挂(2024已更新)(哔哩哔哩);1、用户打开应用后不...
五分钟发现!广东雀神麻雀怎么赢... 五分钟发现!广东雀神麻雀怎么赢,朋朋棋牌都是是真的有挂,高科技教程(有挂方法)1、广东雀神麻雀怎么赢...
每日必看!人皇大厅吗(透明挂)... 每日必看!人皇大厅吗(透明挂)好像存在有挂(2026已更新)(哔哩哔哩);人皇大厅吗辅助器中分为三种...
重大科普!新华棋牌有挂吗(透视... 重大科普!新华棋牌有挂吗(透视)一直是有挂(2021已更新)(哔哩哔哩)1、完成新华棋牌有挂吗的残局...
二分钟内幕!微信小程序途游辅助... 二分钟内幕!微信小程序途游辅助器,掌中乐游戏中心其实存在有挂,微扑克教程(有挂规律)二分钟内幕!微信...
科技揭秘!jj斗地主系统控牌吗... 科技揭秘!jj斗地主系统控牌吗(透视)本来真的是有挂(2025已更新)(哔哩哔哩)1、科技揭秘!jj...
1分钟普及!哈灵麻将攻略小,微... 1分钟普及!哈灵麻将攻略小,微信小程序十三张好像存在有挂,规律教程(有挂技巧)哈灵麻将攻略小是一种具...
9分钟教程!科乐麻将有挂吗,传... 9分钟教程!科乐麻将有挂吗,传送屋高防版辅助(总是存在有挂)1、完成传送屋高防版辅助透视辅助安装,帮...
每日必看教程!兴动游戏辅助器下... 每日必看教程!兴动游戏辅助器下载(辅助)真是真的有挂(2025已更新)(哔哩哔哩)1、打开软件启动之...