浏览器中Vite / Vue3 使用pdf.js(pdfjs-dist) 加载pdf文件

简介有个需求要使用浏览器显示指定pdf文件，我们环境用的是vue3，目前没有太好对于vue3的封装可用，所以直接用原生pdf.js来搞，pdf.js 用起来还是有点繁琐的。

安装 pdf.js， pdf.js的web发布版本是 pdfjs-dist

npm install pdfjs-dist --save

vue template 中添加承载pdf的元素

<div ref="container" id="pdfContainer">
    <div id="viewer" class="pdfViewer"></div>
  </div>

onMounted 中添加主要显示逻辑

onMounted(async () => {
        let pdfjs = await import('pdfjs-dist/build/pdf.js');
        let pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.js');
        let pdfjsViewer = await import('pdfjs-dist/web/pdf_viewer.js');
        pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';
        let pdfcontainer = document.getElementById("pdfContainer");
        let pdfViewer = new pdfjsViewer.PDFViewer({
        container: pdfcontainer,
        renderer: {
                   type: String,
                   default: 'canvas'
                  },
        eventBus: new pdfjsViewer.EventBus(),
      });
      let loadingTask = await  pdfjs.getDocument({
                      cMapUrl:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/cmaps/',
                      cMapPacked:true,
                      url: "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf",
                  });


      let pdf = await loadingTask.promise;
      pdfViewer.setDocument(pdf);
      
      });

如果你并不想使用异步方法，也可以自行修改为 promise 方式，例如

loadingTask.promise.then((pdf: any) => {
        pdfViewer.setDocument(pdf);
      })

由于pdf.js 不支持ts类型，引入pdf.js的相关js时会报错，如
Cannot find module ‘pdfjs-dist/build/pdf.worker.js’ or its corresponding type declarations.

我们需要添加一些代码指定相关js的类型，可以新建一个[name].d.ts 文件，或者在shims-vue.d.ts中放入以下代码

declare module 'pdfjs-dist/*.js'

一些Tip

pdf.js 默认没有工具栏，也就是和官方展示并不一致，如果想要工具栏，可以在 http://mozilla.github.io/pdf.js/getting_started/#download 下载完整包，并自行集成viewer.html 或者参考我后面集成工具栏的文章。
使用默认import导入组件js 代替步骤3中onMounted里面的加载js

import * as pdfjs from 'pdfjs-dist/build/pdf.js';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.js';
import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.js';