使用pdf.js窗口预览pdf

一、业务场景

预览pdf一般通过浏览器自带的pdf预览器就可以，但有时候需要窗口预览或自定义操作，可以使用pdf.js操作

二、使用方法

1. 下载安装

pdf.js需要构建后使用，我们可以直接下载安装pdfjs-dist，这是构建好的版本

npm install pdfjs-dist

这里注意你的环境，新版本使用了可选链，空值合并和私有 class 字段/方法等，如果你的浏览器或node版本太低，建议下载低版本的pdfjs-dist，或尝试引入leagcy文件夹下的兼容版本。

我这里是node12，安装的是@2.6.347，保险起见同样引入legacy兼容版本。

2. 引入使用【vue示例】

通过循环创建canvas来展示每一页的内容，需要考虑容器和画布的缩放比。

如果出现依赖引入和打包工具冲突的问题，可以手动把文件拷贝出来在html内直接引入，默认名称也是pdfjsLib。

<template>
  <div id="app">
    <div class="pdf-container">
      <canvas
        v-for="index in totalPage"
        :key="index"
        :id="`canvas-${index}`"
      ></canvas>
    </div>
  </div>
</template>

// 路径再确认下，版本不同路径可能不同
import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'

    pdfjsLib
      .getDocument(this.pdfPath) // 你的pdf路径
      .promise.then((pdfDocument) => {
        this.totalPage = pdfDocument.numPages; // 页码
        for (let i = 1; i <= pdfDocument.numPages; i++) {
          pdfDocument.getPage(i).then((pdfPage) => {
            let viewport = pdfPage.getViewport({scale: 1.0});
            const containerWidth = document.body.offsetWidth; // 容器宽度
            let scaleViewport = pdfPage.getViewport({scale: containerWidth / viewport.width});
            let canvas = document.getElementById(`canvas-${i}`);
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            let ctx = canvas.getContext("2d");
            let renderTask = pdfPage.render({
              canvasContext: ctx,
              viewport: scaleViewport,
            });
            return renderTask.promise;
          });
        }
      })
      .catch((err) => {
        console.log(err);
        console.error("PDF加载失败");
      });

3. 其他问题

• 可能会出现字体缺失，部分空白问题
• 可能会出现worker运行目录的问题

热门相关：我寄人间   邪王独宠：纨绔异能妃   隐身侍卫   赞助商X   酒店供应商