Vue学习之：在 vue2 中引入 pdf.js 并配置使其能工作

安装

• 不同版本的 pdfjs 在 node_modules 中的目录不太一样，如果你想让他正常运行就按照我下面的来
• 确保你的 nvm 版本是 18.17 如果不是的话，建议你配置跟我调成一样的，否则很容易出问题

  nvm install 18.17.0
  nvm use 18.17.0
  

  • 安装 pdfjs，指定版本号 @2 如果你默认下的话会下载 4 开头的版本，会有各种问题

    npm install pdfjs-dist@2
    

    • 运行以下命令以安装处理类私有方法的 Babel 插件：

      npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods
      

      配置

      • container 的位置 css 设置一定要是 absolute
      • 一定要配置好 EventBus
      • 导入 pdfjsLib 的时候一定要用 import * as pdfjsLib from "pdfjs-dist/build/pdf"; 不能用 import pdfjsLib from "pdfjs-dist/build/pdf"; 否则你无法设置 GlobalWorkerOptions
      • 设置 GlobalWorkerOptions 的时候，本地的如果不行，就按照下面我代码的写 pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
        • 但是注意其中的 2.16.105 要换成你自己安装的 pdf.js 版本号；在 package.json 中可以查看
        • 在你的 babel.config.js 配置成：

          module.exports = {
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-proposal-private-methods"
            ]
          };
          

          示例代码

            
          
              
          
            
          
          
          // 导入 pdfjsLib 的方法要注意 import * as ...
          import * as pdfjsLib from "pdfjs-dist/build/pdf";
          // 引入 eventbus 和 pdfviewer，后面需要配置
          import { PDFViewer, EventBus } from "pdfjs-dist/web/pdf_viewer";
          // 引入样式
          import "pdfjs-dist/web/pdf_viewer.css";
          // globalworker 设置，用 CDN 的资源；如果你本地的也可以那就可以配置成本地的 "pdfjs-dist/build/pdf.worker.min.js"
          pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
          export default {
            name: "PdfViewer",
            mounted() {
              this.getPdf();
            },
            methods: {
              async getPdf() {
                let eventBus = new EventBus();
                let container = document.getElementById("pageContainer");
                let pdfViewer = new PDFViewer({
                  container: container,
                  eventBus: eventBus,	
                });
                let loadingTask = pdfjsLib.getDocument("你自己的文件.pdf");
                let pdf = await loadingTask.promise;
                pdfViewer.setDocument(pdf);
              }
            }
          };
          
          
          #pageContainer {
            position: absolute;			//position设置成 absolute
            margin: auto;
            width: 80%;
          }
          div.page {
            display: inline-block;
          }
          
          

          
          （图片来源网络，侵删）