Vue 项目 PDF 预览插件指南

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-pdfpdfvuer
Vue 3 项目 vue-pdf-embedvue-office
多格式支持 vue-office
高度定制化 直接集成 PDF.js
快速基础预览 pdfobjectiframe

注意事项

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

相关推荐
一城烟雨_3 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想3 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师4 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧4 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信5 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子5 小时前
CSS单位完全指南
前端·css
SunTecTec6 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪7 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程7 小时前
ES练习册
java·前端·elasticsearch
Asthenia04127 小时前
Netty编解码器详解与实战
前端