--- theme: juejin --- # 前言公司最近有这么个需求，在线预览pdf、excel、word功能，正好有点时间，稍微整理记录一下。 ## PDF预览 PDF预览用的是pdfjs-dist这个pdf.js构建库 ### 安装最好记住自己安装的版本，因为后面解析字体的时候可能会用到 ``` pnpm i pdfjs-dist ``` ### 使用 1. 项目中引用因为我安装的版本是2.6.347，所以我这里用cdn引入需要的工作包版本是2.6.347,最好是引用本地的，因为有些内网没法访问cdn的话会造成异常。 ```js import * as pdfjsLib from 'pdfjs-dist/build/pdf'; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js'; ``` 2. 上传组件这时候要简单的写一个上传组件，给组件加上id以及change事件方便测试使用效果 ```

``` 3. 添加一个渲染容器此时需要一个渲染容器来呈现需要预览的内容，我们添加一个空的div标签，给加上一个id属性，也可以用ref。因为内容需要用到canvas画布，所以我们要v-for循环一个画布，渲染多张，如果需求只是需要渲染一张就不需要v-for循环了，但是此场景下也是兼容一张渲染的。 ```

``` 4. 完善change方法 ``` /** * 上传pdf文件 */ function uploadFile() { // 获取到上传文件input组件的dom实例，实际上用ref也行，但是vue2和vue3使用ref的写法上有区别，就不麻烦搞ref了，统一用id了 const file = document.getElementById('fileinput').files[0]; // FileReader是一个强大的读取文件的api，创建一个FileReader实例来读取文件 const reader = new FileReader(); // 将文件内容转换为base64编码的url，方便pdfjs-dist插件加载pdf文档 reader.readAsDataURL(file); // FileReader读取文件完成后触发，此时拿到base64编码的url了 reader.onload = () => { // 直接用atob代码ts会报错，因为网上说这个已经弃用了，但是在代码里面还是能用，不过ts会报错 const data = window.atob(reader.result.substring(reader.result.indexOf(',') + 1)); // 拿到base64编码的url去加载pdf文档 loadPdfData(data); }; } ``` 5. 编写loadPdfData函数 ``` /** * pdf下载以及加载函数(异步) */ const pdfLoadTask = ref(); /** * 引入pdf.js的字体，插件无法解析某些特殊字体，所以需要加载特定字体cmap文件 * 使用cdn的的形式，内网或者没网的时候会失效，建议直接把这个目录下的文件下载到本地，引用本地的资源 */ const cmapUrl = ref('https://unpkg.com/pdfjs-dist@2.6.347/cmaps/'); /** * 通过pdfjs-dist插件生产pdf * @param data base64编码的url */ function loadPdfData(data: string) { // pdfjsLib.getDocument是获取pdf文档的方法，返回的是premise对象，对象包含一些pdf文档的信息以及操作pdf文档的api pdfLoadTask.value = pdfjsLib.getDocument({ data: data, cMapUrl: cmapUrl.value, cMapPacked: true, }); // 渲染页面,至少一页 renderPage(1); } ``` 6. 编写renderPage函数 ``` /** * 需要绘制pdf的总页数 */ const canvasTotalPage = ref(1); /** * 渲染指定页码的pdf文档 * @param num 指定页码 */ function renderPage(num: number) { // 异步函数结束后返回pdf的基本信息以及一些api，是一个对象 pdfLoadTask.value.promise.then((pdf: any) => { // 记录一下总页数，多页的情况，每页都需要新建一个画布 canvasTotalPage.value = pdf.numPages; // 通过调用pdf对象的getPage方法，将指定的页码传入，可以获取传入页码的引用 pdf.getPage(num).then((page: any) => { // 获取canvas的DOM对象 const canvas: any = document.getElementById(`myVancas${num}`); // 获取canvas的渲染上下文(包含canvas的引用以及绘图功能) const ctx = canvas.getContext('2d'); // 获取页面的像素比率 const ratio = getRatio(ctx); // 页面的视口宽度，也就是元素的可视宽度 // 不太理解用offsetWidth，可以看下这篇文章https://zhuanlan.zhihu.com/p/603633893 const viewWidth = document.getElementById('canvasCont').offsetWidth; // pdf文档的宽度 const pdfWidth = page.view[2]; // 根据视口的宽度/pdf文档宽度得到缩放比 const scale = viewWidth / pdfWidth; // 获取pdf文档的缩放后基本信息 const viewport = page.getViewport({ scale }); // 画布的宽高需要根据实际像素调整，避免出现模糊的情况 canvas.width = viewport.width * ratio; canvas.height = viewport.height * ratio; // 准备page.render()函数需要的参数 const renderContext = { canvasContext: ctx, viewport: viewport, }; // 将数据渲染到画布上 page.render(renderContext) // 多页pdf的情况 if (num < pdf.numPages) { renderPage(num + 1); } }); }); } /** * 获取页面的比率 * @param ctx canvas绘图环境的上下文 */ function getRatio(ctx: any) { // window对象中的属性devicePixelRatio，这个属性决定了浏览器会用多少实际的像素来渲染一个像素(也可以理解为css像素) // 至于为什么要获取这个，不同设备的像素比不同，当这个像素比为2时，会用2个实际像素来渲染一个css像素，就相当于放大了视图一倍，会导致屏幕显示模糊 const dpr = window.devicePixelRatio || 1; // canvas的context上下文中也存在一些关于像素比的属性，逻辑是canvas是用几个像素来存储画布信息 // webkit、moz、ms、o这些代码的是不同浏览器之间的内核识别码 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; return dpr / bsr; } ``` ### 完整代码 ``` ``` ### 效果演示 #### 单页 ![pdf.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09cebce15d7341e8b11679cdae19bb08~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1714&h=870&s=899182&e=gif&f=83&b=eff3f4) #### 多页(数据结构一本书) 多页其实滚动条特别长，注意看右边的滚动条 ![pdf-multiple.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9783126179b470fa509e4aa7cb7f93a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1706&h=868&s=3561484&e=gif&f=110&b=eff3f4) ## PDF预览加水印加水印比较简单，在PDF预览代码的page.render函数回调中创建一个画布水印，加到具体页面中。 ### 实现代码 ``` // 将数据渲染到画布上 page.render(renderContext).promise.then(() => { // 添加水印 addWatermark(num, canvas.width, canvas.height); }); /** * 在画布上添加水印 * @param num 画布索引 */ function addWatermark(num: number, width: number, height: number) { const canvas: any = document.getElementById(`myVancas${num}`); const ctx = canvas.getContext('2d'); // 方法在指定的方向内重复指定的元素，元素可以是图片、视频，或者其他