天津正规制作网站公司,小企业管理系统,璧山集团网站建设,微信小商店开店流程H5实现PDF文件预览#xff0c;使用pdf.js-dist进行加载
一、应用场景
在H5平台上预览PDF文件是在原本已经开发完成的系统中新提出的需求#xff0c;原来的系统业务部门是在PC端进行PDF的预览与展示#xff0c;但是现在设备进行了切换#xff0c;改成了安卓一体机进行文件…H5实现PDF文件预览使用pdf.js-dist进行加载
一、应用场景
在H5平台上预览PDF文件是在原本已经开发完成的系统中新提出的需求原来的系统业务部门是在PC端进行PDF的预览与展示但是现在设备进行了切换改成了安卓一体机进行文件预览。因此出现了PDF文件无法显示的问题此前使用的是vue-pdf插件和PDFObject插件实现的预览所以这两个插件是无法实现PDF预览了改为了pdfjs-dist进行PDF的预览。
二、实现方法
法一通过js代码实现预览
该方法适用于预览后端返回的文件流内容但是此方法是将pdf展示在画布上因此无法选中或复制文本内容。
1、定义一个容器用来展示PDF
这个容器可以是div也可以是canvas由于pdfjs渲染pdf文件是一页一页进行展示的因此需要循环进行展示。
templatedivcanvas v-forpageIndex in pdfPages :idpdf-canvas- pageIndex :keypageIndex styledisplay: block;width:100%/canvas/div
/template2、加载pdf
由于我这边的文件来自于后端返回的文件流因此我需要将base64进行转换后进行展示。
script langts setup
import { getDocument } from pdfjs-dist
import * as pdfjsLib from pdfjs-dist
import * as pdfjsWorker from pdfjs-dist/build/pdf.worker.mjs
let pdfDoc reactive({}); // 保存加载的pdf文件流
let pdfPages ref(0); // pdf文件的页数
let pdfScale ref(1.0); // 缩放比例const pdfLoader async () {//...此处为接口请求返回的res.data.result.fileByte为pdf的文件流内容pdfjsLib.GlobalWorkerOptions.workerSrc /pdf.worker.min.js;const blob new Blob([res.data.result.fileByte], { type: application/pdf });let arrayBuffer base64ToBuffer(res.data.result.fileByte);const loadingTask pdfjsLib.getDocument(arrayBuffer);loadingTask.promise.then((pdf) {pdfDoc pdf; //获取pdf文档流pdfPages.value pdf.numPages; //获取pdf文件的页数renderPage(1);//从第几页开始渲染});
}
//渲染pdf文件
const renderPage (num) {pdfDoc.getPage(num).then((page) {const canvasId pdf-canvas- num;const canvas document.getElementById(canvasId);const ctx canvas.getContext(2d);const dpr window.devicePixelRatio || 1;const bsr ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;const ratio dpr / bsr;const viewport page.getViewport({ scale: pdfScale.value });canvas.width viewport.width * ratio;canvas.height viewport.height * ratio;canvas.style.width viewport.width px;canvas.style.height viewport.height px;ctx.setTransform(ratio, 0, 0, ratio, 0, 0);const renderContext {canvasContext: ctx,viewport: viewport,};page.render(renderContext);if (num pdfPages.value) {renderPage(num 1);}});
};
/script
法二通过内置的viewer.html文件进行预览
该方法适用于pdf在本地或者是通过后端返回url链接的操作比较简单 不需要操作API而且可以复制pdf中的文本内容如果需要修改部分功能的话可以直接修改html中的代码进行实现。
1、下载pdf.js官方插件
打开官网的链接链接地址找到下方的Stable按钮下载稳定版本的插件包。 2、将下载后的文件放到项目中
将下载后的压缩包解压后会看到这两个文件夹将这两个文件夹添加到项目中。 其中在web文件夹中有一个viewer.html文件下面将借助这个封装好的文件实现pdf的预览。实现原理是将文件的路径传给viewer.html从而解析该文件进行预览。
如果你的文件在本地那么可以把这个文件放到与viewer.html同一个路径下然后实现预览。
window.open(./js/pdfJS/web/viewer.html?file/pdf/files/compressed.tracemonkey-pldi-09.pdf);//注意路径是否正确如果你的文件是通过后端拿到的URL那么需要修改后面的pdf文件的路径注意需要提前将路径转码。
let fileUrl encodeURIComponent(http:.....xxx.pdf) //将路径转码
window.open(http:...viewer.html?file fileUrl);三、注意事项
pdf.js无法直接在本地预览文件需要启动服务器才能运行例如tomcat、live-server 插件等。查阅相关资料后发现是因为 pdf.js 渲染 pdf 文档时使用了 Web Worker 技术该 Web Worker 无法读取本地文件。
