当前位置：首页 > VUE

前端vue实现pdf预览

2026-01-20 12:25:25VUE

前端 Vue 实现 PDF 预览的方法

使用 PDF.js 库

PDF.js 是 Mozilla 提供的开源库，可直接在浏览器中渲染 PDF 文件。安装依赖后，通过 pdfjs-dist 实现核心功能。

安装依赖：

npm install pdfjs-dist

示例代码：

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

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

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false
    };
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      this.pdfDoc = await loadingTask.promise;
      this.renderPage(this.pageNum);
    },
    async renderPage(num) {
      const page = await this.pdfDoc.getPage(num);
      const viewport = page.getViewport({ scale: 1.0 });
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    }
  },
  mounted() {
    this.loadPDF('your-file.pdf');
  }
};
</script>

使用 vue-pdf 组件

vue-pdf 是基于 PDF.js 的 Vue 封装组件，简化了集成流程。

安装依赖：

npm install vue-pdf

示例代码：

<template>
  <pdf :src="pdfSrc" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: 'your-file.pdf',
      pageCount: 0,
      currentPage: 0
    };
  }
};
</script>

使用 iframe 嵌入

直接通过 <iframe> 标签嵌入 PDF 文件，适合简单场景。

示例代码：

<template>
  <iframe 
    src="your-file.pdf" 
    width="100%" 
    height="600px"
    style="border: none;"
  ></iframe>
</template>

使用第三方服务（如 Google Docs Viewer）

通过在线服务实现预览，无需本地处理 PDF 文件。

示例代码：

<template>
  <iframe 
    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(pdfUrl)}&embedded=true`"
    width="100%"
    height="600px"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'your-file.pdf'
    };
  }
};
</script>