当前位置：首页 > VUE

vue实现pdf浏览

2026-03-09 18:28:15VUE

Vue 实现 PDF 浏览的方法

使用 `pdf.js` 库

pdf.js 是 Mozilla 开发的一个开源库，可以在网页中渲染 PDF 文件。安装依赖：

npm install pdfjs-dist

在 Vue 组件中使用：

<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,
    };
  },
  mounted() {
    this.loadPDF('/path/to/your.pdf');
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url);
      this.pdfDoc = await loadingTask.promise;
      this.renderPage(this.pageNum);
    },
    async renderPage(num) {
      this.pageRendering = true;
      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;
      this.pageRendering = false;
    },
  },
};
</script>

使用 `vue-pdf` 插件

vue-pdf 是一个 Vue 专用的 PDF 查看器插件，封装了 pdf.js 的功能。安装依赖：

npm install vue-pdf

在 Vue 组件中使用：

<template>
  <div>
    <pdf :src="pdfSrc" style="width: 100%;"></pdf>
  </div>
</template>

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

export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfSrc: '/path/to/your.pdf',
    };
  },
};
</script>

使用 `iframe` 嵌入 PDF

浏览器原生支持通过 iframe 嵌入 PDF 文件：

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

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

通过第三方服务在线预览 PDF：

vue实现pdf浏览

<template>
  <div>
    <iframe
      src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true"
      width="100%"
      height="600px"
      style="border: none;"
    ></iframe>
  </div>
</template>