vue 前端预览pdf

你可以使用 PDF.js 在 Vue 前端预览 PDF 文件。以下是一个简单的示例：

1. 首先，安装 `pdfjs-dist` 包：

npm install pdfjs-dist

2. 在 Vue 组件中，导入 `pdfjs-dist` 并创建一个方法来加载和渲染 PDF 文件：

import pdfjsLib from 'pdfjs-dist/webpack';

export default {
  data() {
    return {
      pdfUrl: '/path/to/your/pdf/file.pdf',
      pdfDocument: null,
      currentPage: 1,
      totalPages: 0,
    };
  },
  mounted() {
    this.loadPDF();
  },
  methods: {
    async loadPDF() {
      try {
        const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
        const pdf = await loadingTask.promise;
        this.pdfDocument = pdf;
        this.totalPages = pdf.numPages;
        this.renderPage(this.currentPage);
      } catch (error) {
        console.error('Error loading PDF:', error);
      }
    },
    async renderPage(pageNumber) {
      try {
        const page = await this.pdfDocument.getPage(pageNumber);
        const canvas = this.$refs.pdfCanvas;
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1 });

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        await page.render(renderContext);
      } catch (error) {
        console.error('Error rendering page:', error);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.renderPage(this.currentPage);
      }
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.renderPage(this.currentPage);
      }
    },
  },
};

3. 在模板中使用 `<canvas>` 元素来显示 PDF 页面内容：

<template>
  <div>
    <div>
      <button @click="previousPage">Previous</button>
      <button @click="nextPage">Next</button>
    </div>
    <canvas ref="pdfCanvas"></canvas>
    <div>Page {{ currentPage }} of {{ totalPages }}</div>
  </div>
</template>

这样，你就可以在 Vue 前端预览 PDF 文件了。你可以使用 `nextPage` 和 `previousPage` 方法来切换页面。记得将 `/path/to/your/pdf/file.pdf` 替换成你实际的 PDF 文件路径。