新版 Vite4.x 优化 pdfjs-dist的使用方案

2023-07-08 05:31:15

使用 Vite 4.3.x 时在 Vue 3 项目中集成 PDF.js

问题：从 Vite 2.7.x 升级到 4.3.x 后 PDF.js 失效

在基于 Vite 的 Vue 3 项目中使用 PDF.js 库时，升级到 Vite 4.3.x 后，你可能会遇到 PDF.js 无法正常工作的问题。这是因为 Vite 4.x 对模块系统做出了改变，导致 PDF.js 中某些模块无法正确加载。

解决方案：使用 Vite 插件

要解决此问题，我们可以使用 vite-plugin-pdfjs-dist 插件。这个插件负责正确加载 PDF.js 模块，并将其集成到 Vite 构建系统中。

步骤：

安装 vite-plugin-pdfjs-dist 插件：

npm install vite-plugin-pdfjs-dist

在 vite.config.js 文件中添加插件：

import vitePluginPdfjsDist from 'vite-plugin-pdfjs-dist';

export default {
  plugins: [
    vitePluginPdfjsDist(),
  ],
};

在你的组件中导入所需的 PDF.js 模块：

import * as pdfjsLib from 'pdfjs-dist';

使用 PDF.js 模块呈现 PDF 文档：

const pdfDocument = await pdfjsLib.getDocument({ url: 'path/to/pdf' });
const page = await pdfDocument.getPage(1);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({ canvasContext: ctx, viewport: viewport });

示例代码：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');

    pdfjsLib.getDocument({ url: 'path/to/pdf' }).then((pdfDocument) => {
      pdfDocument.getPage(1).then((page) => {
        const viewport = page.getViewport({ scale: 1 });
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        page.render({ canvasContext: ctx, viewport: viewport });
      });
    });
  },
};
</script>