前端 pdf 预览解决方案（定位，高亮，页面切换，样式定制）
头头不会敲代码 2024-06-26 15:03:02 阅读 89
前言
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文件地址即可实现预览
在项目页面里添加代码：
<iframe id="pdfPreview" src="pdf.js预建包部署的ip地址/pdf/web/viewer.html?page=1&top=0&zoom=auto&file=yourPdfFileUrl"></iframe>
通信
由于需要在主项目里实现一些特殊的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.优势
减少主项目体积压力定制化改pdf.js更方便多项目可真接复用
二.技术实现
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文件里插入一下代码：
<html dir="ltr" mozdisallowselectionprint>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PDF.js viewer</title>
<link rel="stylesheet" href="viewer.css">
<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="locale/locale.properties">
<script src="../build/pdf.js"></script>
<script src="viewer.js" id='js'></script>
// 这是要插入的代码
<script src="messageHandler.js"></script>
</head>
····
</html>
此时pdf应用已支持处理主应用的pdf操作事件，部署到服务器即可，不要忘记叫后端同事处理一下跨域
2.部署pdf预建包
此过程可能会遇见部署后，访问请求不到部分资源问题，这是因为部署时，配置的根目录不对，正确的根目录在web文件夹的父级，慢慢来，不要急
3.主包预览
插入代码
<iframe id="pdfPreview" src="pdf.js预建包部署的ip地址/pdf/web/viewer.html?page=1&top=0&zoom=auto&file=yourPdfFileUrl"></iframe>
注意这里的src地址必需为:你部署的Ips地址+ /pdf/web...拼接而成，不然会引起代码里的文件资源会混乱，所有步骤2中正确的根目录在web文件夹的父级，这个/pdf/web里pdf文件夹是我自己起的名字，你可以自由更改这个文件夹的名字
参数说明：
page 预览pdf时的初始页码top 预览pdf文件时的初始页面高度zoom 预览pdf文件时的初始页面大小比例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应用
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。