Vue3.0 + pdf.js 实现pdf预览

gitHub 地址https://github.com/mozilla/pdf.jsnpm 地址https://www.npmjs.com/package/pdfjs-dist官方地址https://mozilla.github.io/pdf.js/

可看这位博主写的，很详细https://blog.csdn.net/weixin_40906515/article/details/106632083

---

pdf.js

pdf.js的对象结构遵循实际PDF的结构。在顶层有一个文档对象。从文档中，可以获取更多信息和各个页面。要获取 文档：

PDF.getDocument(url);

虽然PDF .js 使用了 Promise，但上面将返回一个 PDFDocumentLoadingTask 实例，该实例具有由文档对象promise解析的属性，

const loadingTask = PDF.getDocument(url);
console.log(loadingTask)
loadingTask.promise.then((pdf) => {
    // 通过 promise 可以获取到下载完成的 PDF 对象，
    // 它会生成并最终返回一个 PDFDocumentProxy 对象。
})

整体逻辑

1. 保留 promise 后的 PDF 对象： pdfCtx
2.  获取到整个 PDF 的页数： pageNum
3. 创建 ID 唯一的 canvas 盒子
4. 设置 canvas 宽高等，渲染 canvas页面；
5. 单页渲染结束后，判断是否达到了最大页数，否的话，num+1，是的话，就停止渲染。 

npm 安装

npm install pdfjs-dist
// pdfjs-dist@2.13.216"

使用-html

<template>
  <div class="pdf_modu">
    <template v-for="item in pageNum" :key="item" class="pdf-page">
      <canvas :id="`pdf-canvas-${item}`"></canvas>
    </template>
  </div>
</template>

使用-script

• 引入 pdfjs-dist，还需要有 pdf 的 workerSrc，这个我放在了public文件夹下

const PDF = require("pdfjs-dist");
PDF.GlobalWorkerOptions.workerSrc = "/pdf_viewer.js";

• 定义参数

const state = reactive({
    url: "",  // pdf的地址
    pageNum: 0, // pdf的总页数
    pdfCtx: null, // pdf对象
});

• 页面加载完成后，判断是否存在url，传参给 loadingTaskPdf()

onMounted(() => {
   if (props.url) {
      state.url = props.url;
      loadingTaskPdf(state.url);
   }
});

• 通过 loadingTaskPdf() ，获取到 pdf对象 和 pdf的总页数，并请求渲染 canvas 的函数 renderPdf()

const loadingTaskPdf = (url) => {

    // getDocument 接口可以获取 url 指定的 PDF 文件，并返回一个 PDFDocumentLoadingTask 对象
    const loadingTask = PDF.getDocument(url);
 
    // 通过 promise 获取到下载完成的 PDF 对象
    loadingTask.promise.then((pdf) => {

    // 将 pdf 对象存到 state.pdfCtx
    state.pdfCtx = pdf;

    // 将 pdf 总页数存到 state.pageNum 
    state.pageNum = pdf.numPages;
        
    // 执行 canvas 渲染函数
    nextTick(() => {
      renderPdf();
    });
  });
};

• canvas 渲染函数

const renderPdf = (num = 1) => {

   state.pdfCtx.getPage(num).then((page) => {

   // 获取 canvas 盒子元素
   const canvas = document.getElementById(`pdf-canvas-${num}`);
   const ctx = canvas.getContext("2d");

   // 设置 canvas  缩放值
   const viewport = page.getViewport(1.4);
   canvas.height = viewport.height;
   canvas.width = viewport.width;
   page.render({
      canvasContext: ctx,
      viewport: viewport,
   });

   //是否达到最大页数
   if (num < state.pageNum) {
      renderPdf(num + 1);
   }
  });
};

结束

到这里，已经基本完成啦，该篇文章和源码会同步更新到 “DataShowCharts”，文章同名，欢迎关注呀~