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

1.安装pdfjs-dist

npm install pdfjs-dist

页面引用

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();

页面组件

复制代码

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

读取文件流，实现预览

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-";
                             // 根据总的页数创建相同数量的canvas
                             that.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.width
                                 pageDiv.setAttribute(
                                   "style",
                                   `width:${canvas.width}px;`
                                 ); 

                                 page
                                   .render(renderContext)
                                   .promise.then(() => {
                                     return page.getTextContent();
                                   })
                                   .then((textContent) => {
                                     // 创建文本图层div
                                     const 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);
                           }
                         );
                       });
                     }
                   }
                 }
               }
             });