Vue 项目 PDF 预览插件指南

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

主流插件及使用示例

1. vue-pdf

简介

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

安装

bash 复制代码

npm install vue-pdf

使用示例

html 复制代码

<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。

安装

bash 复制代码

npm install vue-pdf-embed

使用示例

html 复制代码

<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。

安装

bash 复制代码

npm install pdfvuer

使用示例

html 复制代码

<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。

安装

bash 复制代码

npm install vue-office

使用示例

html 复制代码

<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 实现高度定制化渲染。

安装

bash 复制代码

npm install pdfjs-dist

使用示例

html 复制代码

<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。

安装

bash 复制代码

npm install pdfobject

使用示例

html 复制代码

<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`

注意事项

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