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

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. 页面组件

      <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>

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-";
                                // 根据总的页数创建相同数量的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);
                              }
                            );
                          });
                        }
                      }
                    }
                  }
                });