H5实现PDF文件预览，使用pdf.js-dist进行加载
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文件是一页一页进行展示的，因此需要循环进行展示。
<template>
<div>
<canvas v-for="pageIndex in pdfPages" :id="`pdf-canvas-` + pageIndex" :key="pageIndex" style="display: block;width:100%"></canvas>
</div>
</template>
2、加载pdf
由于我这边的文件来自于后端返回的文件流，因此我需要将base64进行转换后进行展示。
<script lang="ts" 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 无法读取本地文件。