devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：你好赵伟 | 2024-08-17 18:42:19

赞

踩

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

目录

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配置即可。

  1. vue create vue-pdf-demo
  2. // 或者npm create vite
  3. cd vue-pdf-demo

2、安装依赖

        接下来，安装vue-pdf-embed插件：

npm install vue-pdf-embed

3、集成vue-pdf-embed插件

        在src/main.js文件中引入vue-pdf-embed（也可以在组件中局部引入）：

  1. import { createApp } from 'vue';
  2. import App from './App.vue';
  3. import VuePdfEmbed from 'vue-pdf-embed';
  4.  
  5. const app = createApp(App);
  6. app.component('vue-pdf-embed', VuePdfEmbed);
  7. app.mount('#app');

        创建一个PDF展示组件PdfViewer.vue：

  1. <template>
  2.   <div>
  3.     <vue-pdf-embed
  4.       :src="pdfSrc"
  5.       @load="onPdfLoad"
  6.       @page-change="onPageChange"
  7.     />
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       pdfSrc: '/path/to/your/pdf/file.pdf'
  16.     };
  17.   },
  18.   methods: {
  19.     onPdfLoad(pdf) {
  20.       console.log('PDF Loaded', pdf);
  21.     },
  22.     onPageChange(page) {
  23.       console.log('Page Changed', page);
  24.     }
  25.   }
  26. };
  27. </script>
  28.  
  29. <style scoped>
  30. /* Add your styles here */
  31. </style>

四、一个实际的应用demo

        将import pdfurl from "@/assets/altimate.pdf"换成你自己的本地pdf地址，然后在需要渲染的位置引入这个组件，设置好宽高，就可以成功渲染了。

  1. <template>
  2.   <div class="pdf-preview">
  3.     <div class="pdf-wrap">
  4.       <vue-pdf-embed
  5.         :source="state.source"
  6.         :style="scaleFun"
  7.         class="vue-pdf-embed"
  8.         :page="state.pageNum"
  9.       />
  10.     </div>
  11.     <div class="page-tool">
  12.       <div class="page-tool-item" @click="lastPage">上一页</div>
  13.       <div class="page-tool-item" @click="nextPage">下一页</div>
  14.       <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
  15.       <div class="page-tool-item" @click="pageZoomOut">放 大</div>
  16.       <div class="page-tool-item" @click="pageZoomIn">缩 小</div>
  17.     </div>
  18.   </div>
  19. </template>
  20.     
  21. <script lang="ts" setup>
  22. import { reactive, onMounted, computed } from "vue";
  23. import VuePdfEmbed from "vue-pdf-embed";
  24. import { ElMessage } from "element-plus";
  25. // import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数
  26. import pdfurl from "@/assets/altimate.pdf";
  27.  
  28. const state = reactive({
  29.   source: pdfurl, //预览pdf文件地址
  30.   pageNum: 1, //当前页面
  31.   scale: 1, // 缩放比例
  32.   numPages: 44, // 总页数
  33. });
  34.  
  35. const scaleFun = computed(() => {
  36.   return {
  37.     width: "70vh", //按照pdf大约7：10的宽高比，对应80vh的高度，直接设置高度不生效
  38.     // height: "80vh",
  39.     transform: `scale(${state.scale})`,
  40.   };
  41. });
  42. function lastPage() {
  43.   if (state.pageNum > 1) {
  44.     state.pageNum -= 1;
  45.   }
  46. }
  47. function nextPage() {
  48.   if (state.pageNum < state.numPages) {
  49.     state.pageNum += 1;
  50.   }
  51. }
  52. function pageZoomOut() {
  53.   if (state.scale < 1) {
  54.     state.scale += 0.1;
  55.   } else {
  56.     ElMessage({
  57.       message: "已经放大到最大了",
  58.       type: "warning",
  59.     });
  60.   }
  61. }
  62. function pageZoomIn() {
  63.   if (state.scale > 0.6) {
  64.     state.scale -= 0.1;
  65.   } else {
  66.     ElMessage({
  67.       message: "已经缩放到最小了",
  68.       type: "warning",
  69.     });
  70.   }
  71. }
  72.  
  73. onMounted(() => {
  74.   //   const loadingTask = createLoadingTask(state.source);
  75.   //   loadingTask.promise.then((pdf: { numPages: number }) => {
  76.   //     state.numPages = pdf.numPages;
  77.   //   });
  78. });
  79. </script>
  80.     
  81. <style lang="scss" scoped>
  82. // 桌面端显示
  83. // 桌面端显示
  84. // 桌面端显示
  85.  
  86. .pdf-preview {
  87.   //   position: relative;
  88.   //   height: 100vh;
  89.  
  90.   width: 50vw;
  91.   //   padding: 0px 0;
  92.   //   box-sizing: border-box;
  93.  
  94.   //   margin: 0 25%;
  95.   //   background: rgb(66, 66, 66);
  96.   .pdf-wrap {
  97.     //   border: 1px solid black;
  98.     display: flex;
  99.     justify-content: center;
  100.     //   height: 100vh;
  101.     //   overflow-y: auto;
  102.     .vue-pdf-embed {
  103.       //   border: 1px solid black;
  104.  
  105.       text-align: center;
  106.       //   width: 50%;
  107.       //   height: 60vh;
  108.       //   margin: 0 10%;
  109.       box-sizing: border-box;
  110.       box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);
  111.       //   transform: scale(0.72);
  112.     }
  113.   }
  114.   .page-tool {
  115.     //   position: absolute;
  116.     //   bottom: 35px;
  117.     //   padding-left: 15px;
  118.     //   padding-right: 15px;
  119.     width: 25vw;
  120.     margin: 5px 25%;
  121.     display: flex;
  122.     justify-content: center;
  123.     display: flex;
  124.     align-items: center;
  125.     background: rgb(66, 66, 66);
  126.     color: white;
  127.     border-radius: 19px;
  128.     z-index: 100;
  129.     //   cursor: pointer;
  130.     //   margin-left: 25%;
  131.     //   transform: translateX(-50%);
  132.     //   border: white solid;
  133.     .page-tool-item {
  134.       padding: 8px 15px;
  135.       padding-left: 10px;
  136.       cursor: pointer;
  137.     }
  138.   }
  139. }
  140.  
  141. @media (max-width: 1000px) {
  142.   .pdf-preview {
  143.     width: 95vw;
  144.  
  145.     .pdf-wrap {
  146.       display: flex;
  147.       justify-content: center;
  148.       .vue-pdf-embed {
  149.         // text-align: center;
  150.         // box-sizing: border-box;
  151.         box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);
  152.       }
  153.     }
  154.  
  155.     .page-tool {
  156.       width: 40vw;
  157.       margin: 5px 30%;
  158.       display: flex;
  159.       justify-content: center;
  160.       display: flex;
  161.       align-items: center;
  162.       background: rgb(66, 66, 66);
  163.       color: white;
  164.       border-radius: 19px;
  165.       z-index: 100;
  166.       .page-tool-item {
  167.         padding: 8px 15px;
  168.         padding-left: 10px;
  169.         cursor: pointer;
  170.       }
  171.     }
  172.   }
  173. }
  174. </style>

五、总结

        本文详细介绍了如何在Vue项目中使用vue-pdf-embed实现PDF文件的在线展示。从项目初始化、插件集成到高级功能的实现和部署优化，希望对你有所帮助。在实际项目中，灵活运用这些技术可以大大提升用户体验和项目质量。

        只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

        更多优质内容，请关注：

        分片上传技术全解析：原理、优势与应用（含简单实现源码）

        浏览器渲染揭秘：从加载到显示的全过程

        你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

        shpfile转GeoJSON且控制转化精度；如何获取GeoJSON？GeoJson结构详解

        通过array.reduce(）实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等

        极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

        Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等

        管理数据必备！侦听器watch用法详解

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/994006
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号