vue前端实现预览pdf

要在 Vue 前端实现预览 PDF 文件，可以使用 PDF.js 开源项目。PDF.js 是一个使用 JavaScript 实现的 PDF 渲染器，可以在网页上直接渲染 PDF 文件。以下是实现步骤：

1. 安装 pdfjs-dist 包：可以使用 npm 或 yarn 安装，命令如下：

npm install pdfjs-dist

2. 在 Vue 组件中引入 pdfjs-dist 包：

import pdfjsLib from 'pdfjs-dist';

3. 定义一个方法，用于加载和渲染 PDF 文件：

loadPdf(pdfUrl) {
  // 获取 PDF 文件的 ArrayBuffer 数据
  const loadingTask = pdfjsLib.getDocument({ url: pdfUrl });
  loadingTask.promise.then(pdf => {
    // 获取 PDF 第一页
    const pageNumber = 1;
    pdf.getPage(pageNumber).then(page => {
      // 获取该页的 Canvas 渲染上下文
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');

      // 计算 Canvas 尺寸，使 PDF 渲染不失真
      const viewport = page.getViewport({ scale: 1 });
      const scale = canvas.width / viewport.width;
      const scaledViewport = page.getViewport({ scale });

      // 渲染 PDF
      page.render({
        canvasContext: context,
        viewport: scaledViewport
      });
    });
  });
}

4. 在 Vue 模板中使用 Canvas 元素来显示 PDF：

<canvas id="pdf-canvas"></canvas>

5. 在需要加载 PDF 的地方调用 loadPdf 方法即可：

this.loadPdf('your-pdf-url.pdf');

注意：需要在你的项目中引入 pdf.worker.js 文件，可以从 pdfjs-dist 包中获取，也可以从官网下载。