最近因为业务需求，需要在项目中预览pdf，并且搜索pdf中的文字高亮显示。 本人才疏学浅，上网查了不少资料，奈何网上关于这方面的资料太少，整了三天才整出来。 记录在这里，供以后学习使用
第一种vue-pdf
一种比较简洁的pdf预览插件，也是vue插件库推荐的, 文档很清楚资料也很多就不详述了 GitHub github.com/FranckFreib…
第二种pdfjs-dist
pdf.js的构建版本 我采用的版本是 pdfjs-dist@2.2.228
渲染方式
第一种渲染方式
通过创建一个承载pdf的canvas标签，然后通过pdf.render()的方式将pdf渲染到创建的canvas标签上
参考链接
第二种渲染方式
采用pdf.js 自带的预览pdf的viewer
创建
import pdfjs from "pdfjs-dist";
import {
PDFLinkService,
PDFViewer,
PDFFindController
} from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
/*加载PDF文件*/
loadPdf(url) {
const linkService = new PDFLinkService();
const findController = new PDFFindController({
linkService,
});
let _this = this;
// PDFSinglePageViewer 单页控制器
// PDFViewer 多页控制器
const newViewer = new PDFViewer({
container: _this.$refs.containerRef, // 显示PDF的容器dom
linkService, // 不懂但必须
useOnlyCssZoom: true, // 否可以通过css控制页面的缩放,默认 false
textLayerMode: 1, // 显示文字类型 渲染文字图层
// renderer:'svg', // 用什么方式渲染 可选canvas和svg
findController, // 文字查找控制器
});
linkService.setViewer(newViewer);
// 缩放
newViewer.currentScaleValue = "page-width"; // 无效 暂且不知道为什么
pdfjs.getDocument(url).promise.then((pdf) => {
if (pdf) {
// 总页数
_this.numPages = pdf.numPages;
newViewer.setDocument(pdf);
linkService.setDocument(pdf);
// 全局的newViewer
_this.newViewer = newViewer;
// 判断是否已经渲染完毕
_this.interval = setInterval(() => {
_this.loadCompletePdf();
}, 100);
}
});
},
复制代码以上方法注册了一个单页预览pdf的viewer，需要注意的是
- PDFViewer 创建一个预览多页pdf的对象
- PDFSinglePageViewer 创建预览单页pdf的对象 参数同PDFViewer
- PDFLinkService 不太懂是干什么的 但是是必须的
- PDFFindController 文字查找控制器
其他的还有一些像DownloadManager下载控制器等这些对象，这里没用到就不细说了，具体的可以查看pdf.js源码。
new PDFSinglePageViewer({})除了上面代码中写到的参数，还有一些其他参数，如下
- maxCanvasPixels 最大canvas像素
- enablePrintAutoRotate 启用打印旋转
还有一些属性可以通过newViewer对象直接访问，如下
- pagesCount 总页数
- pageViewsReady 是否渲染完成，通过这个属性判断是不是所有的页面都渲染完成，因为pdf渲染是异步的，有一些事件监听是需要渲染完成后再进行
- currnetPageNumber 当前页码，翻页使用
- currentScale 缩放比率，设置页面缩放需要用currentScaleValue
- pagesRotation 页面旋转
- isPageVisible(pageNumber) 传入页码判断页面是否不可见
上面代码对应的html
<div id="viewerContainer" class="viewerContainer" ref="containerRef">
<div id="viewer" class="pdfViewer"></div>
</div>
复制代码翻页
翻页就是改变currnetPageNumber的值
this.newViewer.currentPageNumber = num;
缩放
缩放就是改变currentScaleValue的值
this.newViewer.currentScaleValue = "page-width"
文字查找
this.newViewer.findController.executeCommand("find", this.searcher);
查找参数
phraseSearch: true, // 是否短语查找
query: "", // 查询字段
findPrevious: undefined, // 是否循环查找
highlightAll: true, // 是否高亮
caseSensitive: false, // 区分大小写
entireWord: false, // 整个单词
复制代码注意 定位查找字段时需要传入 findagain
先到这里，以后有啥需要补充的再加
参考资料
