作者：watermelo37
涉及领域：Vue、SpingBoot、Docker、LLM、python等
-------------------------------------------------------------------------------------------------------------------------
--------------------------温柔地对待温柔的人，包容的三观就是最大的温柔。--------------------------
-------------------------------------------------------------------------------------------------------------------------
编辑
PDF在线预览实现：如何使用vue-pdf-embed实现前端PDF在线阅读
编辑
一、前言
在本篇博客中介绍的vue-pdf-embed核心逻辑是获取pdf内容并将其每一页渲染到canvas画布上，以类似图片的方式展示出来。pdf作为本地资源放在项目中。
提醒：我还写了一篇在线预览pdf的组件博客，是用一个预定义的pdf阅览器，然后下载在线的pdf资源，将pdf渲染到pdf阅览器中，请移步：PDF预览：利用vue3-pdf-app实现前端PDF在线展示
二、vue-pdf-embed是什么
vue-pdf-embed是一个基于Vue.js的插件，专门用于在Vue应用中嵌入和展示PDF文件。它利用PDF.js库进行PDF文件的渲染，提供了简单易用的接口，使开发者能够快速在Vue项目中集成PDF展示功能。
1、作用与场景
vue-pdf-embed主要用于以下场景：
- 在线文档管理系统：用户可以直接在浏览器中查看、阅读和管理PDF文档。
- 在线书籍阅读器：提供流畅的PDF书籍在线阅读体验。
- 报告展示系统：用于展示PDF格式的报告、分析文档等。
- 电子签名系统：允许用户在线查看并签署PDF文档。
2、vue-pdf-embed的优点
- 易于集成：提供了简单的接口，方便快速集成到Vue项目中。
- 功能全面：支持多种PDF操作功能，如分页、缩放等，满足多样化的需求。
- 高性能：通过分页加载和缓存优化，确保PDF文件的快速渲染和展示。
- 良好的文档支持：提供详细的文档和示例，方便开发者上手使用。
使用 PDF.js 库来直接在浏览器中渲染 PDF 文件的内容。PDF.js 是一个通用的 PDF 阅读器，它可以在网页上显示矢量 PDF 文件，而不需要任何插件。
使用 vue-pdf-embed 的好处还有它保持了 PDF 的原有质量，并且可以利用 PDF.js 的强大功能，如文档加密、表单填写等。此外，由于它是基于 Canvas 的，它还支持响应式设计，可以根据容器尺寸动态调整页面的显示大小。
三、项目初始化与依赖安装
首先，我们需要初始化一个Vue项目，并安装必要的依赖。
1、初始化Vue项目
使用Vue CLI来初始化一个新的Vue项目/使用vite来初始化一个新的Vue3项目，在创建过程中，选择默认的Vue3配置即可。
vue create vue-pdf-demo // 或者npm create vite cd vue-pdf-demo
2、安装依赖
接下来，安装vue-pdf-embed插件：
npm install vue-pdf-embed
3、集成vue-pdf-embed插件
在src/main.js文件中引入vue-pdf-embed（也可以在组件中局部引入）：
import { createApp } from 'vue'; import App from './App.vue'; import VuePdfEmbed from 'vue-pdf-embed'; const app = createApp(App); app.component('vue-pdf-embed', VuePdfEmbed); app.mount('#app');
创建一个PDF展示组件PdfViewer.vue：
<template> <div> <vue-pdf-embed :src="pdfSrc" @load="onPdfLoad" @page-change="onPageChange" /> </div> </template> <script> export default { data() { return { pdfSrc: '/path/to/your/pdf/file.pdf' }; }, methods: { onPdfLoad(pdf) { console.log('PDF Loaded', pdf); }, onPageChange(page) { console.log('Page Changed', page); } } }; </script> <style scoped> /* Add your styles here */ </style>
四、一个实际的应用demo
将import pdfurl from "@/assets/altimate.pdf"换成你自己的本地pdf地址，然后在需要渲染的位置引入这个组件，设置好宽高，就可以成功渲染了。
<template> <div class="pdf-preview"> <div class="pdf-wrap"> <vue-pdf-embed :source="state.source" :style="scaleFun" class="vue-pdf-embed" :page="state.pageNum" /> </div> <div class="page-tool"> <div class="page-tool-item" @click="lastPage">上一页</div> <div class="page-tool-item" @click="nextPage">下一页</div> <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div> <div class="page-tool-item" @click="pageZoomOut">放 大</div> <div class="page-tool-item" @click="pageZoomIn">缩 小</div> </div> </div> </template> <script lang="ts" setup> import { reactive, onMounted, computed } from "vue"; import VuePdfEmbed from "vue-pdf-embed"; import { ElMessage } from "element-plus"; // import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数 import pdfurl from "@/assets/altimate.pdf"; const state = reactive({ source: pdfurl, //预览pdf文件地址 pageNum: 1, //当前页面 scale: 1, // 缩放比例 numPages: 44, // 总页数 }); const scaleFun = computed(() => { return { width: "70vh", //按照pdf大约7：10的宽高比，对应80vh的高度，直接设置高度不生效 // height: "80vh", transform: `scale(${state.scale})`, }; }); function lastPage() { if (state.pageNum > 1) { state.pageNum -= 1; } } function nextPage() { if (state.pageNum < state.numPages) { state.pageNum += 1; } } function pageZoomOut() { if (state.scale < 1) { state.scale += 0.1; } else { ElMessage({ message: "已经放大到最大了", type: "warning", }); } } function pageZoomIn() { if (state.scale > 0.6) { state.scale -= 0.1; } else { ElMessage({ message: "已经缩放到最小了", type: "warning", }); } } onMounted(() => { // const loadingTask = createLoadingTask(state.source); // loadingTask.promise.then((pdf: { numPages: number }) => { // state.numPages = pdf.numPages; // }); }); </script> <style lang="scss" scoped> // 桌面端显示 // 桌面端显示 // 桌面端显示 .pdf-preview { // position: relative; // height: 100vh; width: 50vw; // padding: 0px 0; // box-sizing: border-box; // margin: 0 25%; // background: rgb(66, 66, 66); .pdf-wrap { // border: 1px solid black; display: flex; justify-content: center; // height: 100vh; // overflow-y: auto; .vue-pdf-embed { // border: 1px solid black; text-align: center; // width: 50%; // height: 60vh; // margin: 0 10%; box-sizing: border-box; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); // transform: scale(0.72); } } .page-tool { // position: absolute; // bottom: 35px; // padding-left: 15px; // padding-right: 15px; width: 25vw; margin: 5px 25%; display: flex; justify-content: center; display: flex; align-items: center; background: rgb(66, 66, 66); color: white; border-radius: 19px; z-index: 100; // cursor: pointer; // margin-left: 25%; // transform: translateX(-50%); // border: white solid; .page-tool-item { padding: 8px 15px; padding-left: 10px; cursor: pointer; } } } @media (max-width: 1000px) { .pdf-preview { width: 95vw; .pdf-wrap { display: flex; justify-content: center; .vue-pdf-embed { // text-align: center; // box-sizing: border-box; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); } } .page-tool { width: 40vw; margin: 5px 30%; display: flex; justify-content: center; display: flex; align-items: center; background: rgb(66, 66, 66); color: white; border-radius: 19px; z-index: 100; .page-tool-item { padding: 8px 15px; padding-left: 10px; cursor: pointer; } } } } </style>
五、总结
本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化，希望对你有所帮助。在实际项目中，灵活运用这些技术可以大大提升用户体验和项目质量。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
更多优质内容，请关注：
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
shpfile转GeoJSON且控制转化精度；如何获取GeoJSON？GeoJson结构详解
通过array.reduce(）实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
