Vue3.js 中使用 pdf.js 加载和渲染 PDF 文件

可以使用 pdf.js 库在 Vue 项目中加载和渲染 PDF 文件。可以通过将 pdf.js 作为单独的模块导入到 Vue 组件中来实现这一点。

首先，需要在 Vue 项目中安装 pdf.js 库。可以使用 npm 或 yarn 来安装 pdf.js：

npm install pdfjs-dist

或者

yarn add pdfjs-dist

然后，在 Vue 组件中导入 pdf.js 并使用它来加载和渲染 PDF 文件。例如，可以在 Vue 组件的 mounted 生命周期钩子函数中加载 PDF 文件：

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

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

export default {
  mounted() {
    pdfjsLib.getDocument('/path/to/pdf/file.pdf')
      .promise.then(pdf => {
        pdf.getPage(1).then(page => {
          const viewport = page.getViewport({scale: 1});
          const canvas = this.$refs.canvas;
          const context = canvas.getContext('2d');
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          page.render({canvasContext: context, viewport});
        });
      });
  }
}
</script>

在此示例中，pdf.js 从本地文件系统中加载 PDF 文件，并将其呈现在 Vue 组件中的 canvas 元素中。可以根据需要进行调整以适应特定的用例。