vue项目中pdfjs-dist实现在线浏览PDF文件

1. 安装 pdfjs-dist

首先，通过 npm 安装 pdfjs-dist：

npm install pdfjs-dist@2.5.207 --save

2. 配置 Worker 文件路径

pdfjs-dist 需要一个 Worker 文件来处理 PDF 的加载和渲染。需要指定 Worker 文件的路径：

import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry'; // 确保 worker 文件被引入

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

3. 创建 PDF 查看器组件

在 Vue 组件中，使用 pdfjs-dist 加载并渲染 PDF 文件：

<template>
  <div>
    <canvas v-for="page in pages" :key="page" :id="`pdf-canvas-${page}`" class="pdf-page" />
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

export default {
  data() {
    return {
      pdfUrl: 'http://example.com/path/to/your.pdf', // PDF 文件路径
      pages: 0, // PDF 总页数
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      const pdf = await loadingTask.promise;
      this.pages = pdf.numPages; // 获取 PDF 总页数

      for (let i = 1; i <= this.pages; i++) {
        this.renderPage(pdf, i);
      }
    },
    renderPage(pdf, pageNumber) {
      pdf.getPage(pageNumber).then((page) => {
        const canvas = document.getElementById(`pdf-canvas-${pageNumber}`);
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.5 }); // 设置缩放比例
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const renderContext = {
          canvasContext: context,
          viewport,
        };
        page.render(renderContext);
      });
    },
  },
};
</script>

<style>
.pdf-page {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>