当前位置：首页 > news >正文

使用pdfjs-dist 预览pdf,并添加文本层的实现

news 2025/9/12 5:11:31

1.安装pdfjs-dist

npm install pdfjs-dist

2. 页面引用

const PDFJS = require("pdfjs-dist");
import {TextLayerBuilder,EventBus,
} from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
const pdfjsWorker = import("pdfjs-dist/build/pdf.worker.entry");
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;const eventBus = new EventBus();

3. 页面组件

      <divclass="drag-box"><divclass="wrapper"id="pdf-container"><divv-for="item in totals":id="`page-${item}`":key="item"class="pdf-box"><canvas:id="'canvas-pdf-' + item"class="canvas-pdf"></canvas></div></div></div>

4. 读取文件流，实现预览

 getMyDoc(myParam).then((myRes) => {let data = myRes.data;try {// 如果能解析，则是失败结果let json = JSON.parse(data);that.$message.warning(data.message);} catch {// 成功if (data.type == "application/json") {let reader = new FileReader();reader.readAsText(data, "utf-8");reader.onload = (e) => {let readerres = reader.result;let parseObj = {};parseObj = JSON.parse(readerres);that.$message.warning(parseObj.message);};} else {const binaryData = [];binaryData.push(data);//获取blob链接let pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));if (pdfUrl) {//that.pdfUrl = pdfUrl;that.$nextTick(() => {let container =document.getElementById("pdfViewer");let source = { url: pdfUrl };PDFJS.getDocument(source).promise.then((pdf) => {// 得到PDF的总的页数let totalPage = pdf.numPages;let idName = "canvas-pdf-";// 根据总的页数创建相同数量的canvasthat.createCanvas(totalPage, idName);for (let i = 1; i <= totalPage; i++) {pdf.getPage(i).then((page) => {let pageDiv = document.getElementById(`page-${i}`);let viewport = page.getViewport({scale: that.scale,});let canvas = document.getElementById(idName + i);console.log("canvas", canvas, idName + i);let context = canvas.getContext("2d");// 控制大小，pdf有的1000多的宽度，有的500多的宽度if (viewport.width > 1146) {that.scale = 1.0;viewport = page.getViewport({scale: that.scale,}); // 默认是1.4}canvas.height = viewport.height;canvas.width = viewport.width;let renderContext = {canvasContext: context,viewport,};// 宽度不固定，有的页面宽有的页面窄, 不在使用统一宽度// this.viewWidth=canvas.widthpageDiv.setAttribute("style",`width:${canvas.width}px;`); page.render(renderContext).promise.then(() => {return page.getTextContent();}).then((textContent) => {// 创建文本图层divconst textLayerDiv =document.createElement("div");textLayerDiv.setAttribute("class","textLayer");// 将文本图层div添加至每页pdf的div中pageDiv.appendChild(textLayerDiv);// 创建新的TextLayerBuilder实例let textLayer = new TextLayerBuilder({textLayerDiv: textLayerDiv,pageIndex: page.pageIndex,viewport: viewport,eventBus,});textLayer.setTextContent(textContent);textLayer.render();});});}}},(reason) => {console.error(reason);});});}}}}});