PDF在线预览实现：如何使用vue-pdf-embed实现前端PDF在线阅读

一、前言

二、vue-pdf-embed是什么

1、作用与场景

2、vue-pdf-embed的优点

三、项目初始化与依赖安装

1、初始化Vue项目

2、安装依赖

3、集成vue-pdf-embed插件

四、一个实际的应用demo

五、总结

作者：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>