【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  setup() {
    const pdfCanvas = ref(null);
 
    onMounted(async () => {
      const canvas = pdfCanvas.value;
      const context = canvas.getContext('2d');
      const url = 'path/to/your/pdf/file.pdf';
 
      // 加载PDF文档
      const loadingTask = pdfjsLib.getDocument(url);
      const pdf = await loadingTask.promise;
 
      // 获取第一页
      const page = await pdf.getPage(1);
 
      // 计算视口大小以适应画布
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
 
      // 渲染页面
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    });
 
    return {
      pdfCanvas
    };
  }
};
</script>

这个示例代码展示了如何在Vue 3中使用PDF.js来加载和渲染一个PDF文件的第一页。代码使用了Composition API，其中setup函数负责加载和渲染PDF页面。注意，你需要先安装pdfjs-dist npm包才能使用。