pdf预览 - 技术栈

使用pdfjs-dist完成pdf预览功能，注意版本号。

新版用了很多es新写法，好像更适合vue3使用，老项目识别不了其中的一些语法。我用的时候，先是报了 obj?.name这种语法的错误，解决之后又报其他错误。

复制代码

npm install pdfjs-dist@2.2.228

本地测试

用require引入pdf本地测试，就像我是把pdf放到assets目录下，那么需要下载一个file-loader@6.2.0，不然会报错。要注意去node_modules底下看看有没有file-loader，有就不要下了。

如果是之后下载的，测试完了立马把插件和代码都删了，不然会影响其他插件。 这玩意和部分插件版本是要对应的，如果不一致会出问题。

复制代码

npm install file-loader

module.exports = defineConfig({
  ···
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|pdf)$/i,
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          },
        },
      ],
    }
  }
})

1.使用pdfjs-dist

引入

复制代码

import * as pdfjsLib from "pdfjs-dist/build/pdf";
import workerSrc from "pdfjs-dist/build/pdf.worker.min";

使用

复制代码

<div class="interviewVideo_main" 
   style="height: 440px;width:600px" id="videoContainer">
      <!--此处根据pdf的页数动态生成相应数量的canvas画布-->
      <canvas
          v-for="pageIndex in pdfPages"
          :id="`pdf-canvas-` + pageIndex"
          :key="pageIndex"
          style="display: block"
      ></canvas>
 </div>

pdfDoc: {}, // 保存加载的pdf文件流
pdfPages: 0, // pdf文件的页数
//pdf文件的链接
pdfUrl: "../../../assets/cheshi2.pdf", 
pdfScale: 1.0,

        async loadFile() {
            // ../../../assets/cheshi2.pdf   ../../../../public/cheshi2.pdf
            let url = require(this.pdfUrl).default
            console.log(url);
            pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
            const loadingTask = pdfjsLib.getDocument({url,
            withCredentials: false,
            cMapPacked: true,
            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/',
            cMapPacked: true,
            });
            loadingTask.promise.then((pdf) => {
            console.log(pdf);
            this.pdfDoc = pdf;                 //获取pdf文档流
            this.pdfPages = pdf.numPages;//获取pdf文件的页数
            this.$nextTick(() => {
                this.renderPage(1);
            });
            });
        },
        renderPage (num) {
            this.pdfDoc.getPage(num).then((page) => {
            const canvasId = "pdf-canvas-" + num;
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext("2d");
            
            let viewport = page.getViewport({ scale: this.pdfScale });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: ctx,
                viewport: viewport,
            };
            page.render(renderContext);

            // 显示整个pdf
            if (num < this.pdfPages) {
                this.renderPage(num + 1);
            }
            });
        },

再给个参考文章，两者原理一样，他这个还加了水印：vue-pdf使用及注意事项-CSDN博客