Vue 项目 PDF 预览插件指南

Vue 项目 PDF 预览插件指南

本文整合了 Vue 项目中常用的 PDF 预览插件，涵盖 Vue 2 和 Vue 3 的解决方案，并提供使用示例和选型建议。

---

主流插件及使用示例

1. vue-pdf

简介

• 基于 pdf.js 封装的 Vue 2 插件，支持分页渲染和基础交互。
• 兼容性：仅支持 Vue 2。

安装

npm install vue-pdf

使用示例

<template>
  <pdf :src="pdfUrl" :page="currentPage" />
</template>

<script>
import pdf from 'vue-pdf';
export default {
  components: { pdf },
  data() {
    return { 
      pdfUrl: 'path/to/file.pdf',
      currentPage: 1 
    };
  }
};
</script>

特点

• 支持动态加载 PDF 文件流。
• 多页 PDF 需循环渲染组件。

---

2. vue-pdf-embed

简介

• 专为 Vue 3 优化的 PDF 预览组件，支持翻页、缩放、下载等功能。
• 兼容性：Vue 3 专用，支持 SSR。

安装

npm install vue-pdf-embed

使用示例

<template>
  <VuePdfEmbed :source="pdfUrl" :page="1" />
</template>

<script setup>
import { VuePdfEmbed } from 'vue-pdf-embed';
const pdfUrl = "/example.pdf";
</script>

特点

• 现代化 UI，支持文本层和工具栏定制。
• 移动端适配友好，清晰度优化方案可参考官方文档。

---

3. pdfvuer

简介

• 适用于 Vue 2 的轻量级 PDF 查看器，支持缩略图和逐页加载。
• 兼容性：Vue 2。

安装

npm install pdfvuer

使用示例

<template>
  <pdf :src="pdfData" :page="currentPage" @num-pages="totalPages = $event" />
</template>

<script>
import pdf from 'pdfvuer';
export default {
  components: { pdf },
  data() {
    return { 
      pdfData: { url: "/example.pdf" },
      currentPage: 1,
      totalPages: 0
    };
  }
};
</script>

特点

• 依赖 pdf.js，需注意版本匹配。
• 适合大文件分页加载场景。

---

4. vue-office

简介

• 一站式文件预览库，支持 PDF、Word、Excel 等多种格式。
• 兼容性：Vue 2 和 Vue 3。

安装

npm install vue-office

使用示例

<template>
  <VueOfficePdf :src="pdfUrl" />
</template>

<script>
import { VueOfficePdf } from 'vue-office';
export default {
  components: { VueOfficePdf },
  data() {
    return { pdfUrl: "/example.pdf" };
  }
};
</script>

特点

• 多格式文件预览首选，适合复杂业务需求。

---

5. 直接集成 PDF.js

简介

• 无需 Vue 插件，直接使用 pdfjs-dist 实现高度定制化渲染。

安装

npm install pdfjs-dist

使用示例

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

<script setup>
import { ref, onMounted } from 'vue';
import * as pdfjsLib from 'pdfjs-dist';

const pdfCanvas = ref(null);
onMounted(async () => {
  const pdf = await pdfjsLib.getDocument("/example.pdf").promise;
  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 1.5 });
  const canvas = pdfCanvas.value;
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  page.render({ canvasContext: canvas.getContext('2d'), viewport });
});
</script>

特点

• 灵活性最高，适合需要深度定制的项目。

---

6. pdfobject

简介

• 轻量级库，自动检测浏览器支持并嵌入 PDF。

安装

npm install pdfobject

使用示例

<template>
  <div ref="pdfContainer"></div>
</template>

<script>
import PDFObject from 'pdfobject';
export default {
  mounted() {
    PDFObject.embed('/example.pdf', this.$refs.pdfContainer);
  }
};
</script>

特点

• 提供回退下载链接，兼容性较好。

---

选型建议

场景	推荐方案
Vue 2 项目	vue-pdf 或 pdfvuer
Vue 3 项目	vue-pdf-embed 或 vue-office
多格式支持	vue-office
高度定制化	直接集成 PDF.js
快速基础预览	pdfobject 或 iframe

---

注意事项

1. 跨域问题：外部 PDF 文件需配置 CORS 策略。
2. 性能优化 ：大文件建议分页加载（如 pdfvuer 的逐页渲染）。
3. 移动端适配 ：调整 canvas 分辨率以优化清晰度。
4. 版本兼容性 ：部分插件依赖特定版本的 pdf.js，需检查文档。

---