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

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绘制一个完美流程图

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397198.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java面试题精选:消息队列(一)

1、为什么使用消息队列 问题用意&#xff1a; 其实就是想问一下消息队列有哪些使用场景&#xff0c;你项目中什么业务场景用到了消息队列&#xff0c;有什么技术挑战。使用MQ后给你带来了什么好处 规范回答&#xff1a; 消息队列的常见使用场景很多&#xff0c;但比较核心的…

【漏洞修复】Tomcat中间件漏洞

1.CVE-2017-12615 抓包上传一句话木马 密码passwd 2.后台弱口令部署war包 先用弱口令登录网站后台 制作war包 将172.jsp压缩成.zip文件&#xff0c;修改后缀为.war 上传 蚁剑链接 3.CVE-2020-1938 Python2 CVE-2020-1938.py IP -p 端口 -f 要读取的文件 漏洞修复&#xf…

超越自我——带你学haproxy算法一遍过!!!

文章目录 前言介绍 静态算法static-rrfirst 动态算法roundrobinleastconn 其他算法source算法map-base 取模法一致性hashuriurI_param 取模法hdr 总结本文相关连接如下&#xff1a; 前言 本文相关连接如下&#xff1a; 如果想更多了解haproxy的相关知识&#xff0c;请点击&am…

HTTP协议和运行原理

HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。不仅仅适用于[服务器<–>客户端]也是适用于[服务器<–>服务器] HTTP 状态码 1xx 1xx 类状态码属于提示信息&#xff0c;是协议处理中的一种中间状态&#xff0c;实际…

操作系统 IO 相关知识

操作系统 IO 相关知识 阻塞与非阻塞同步与异步IO 和系统调用传统的 IODMAmmap 内存映射sendfilesplice 常用的 IO 模型BIO&#xff1a;同步阻塞 IONIO&#xff1a;同步非阻塞 IOIO 多路复用信号驱动 IOAIO&#xff1a;异步 IO 模型 IO 就是计算机内部与外部进行数据传输的过程&…

加密案例分享:电子设备制造行业

企业核心诉求选择 1.某企业规模庞大&#xff0c;分支众多&#xff0c;数据安全管理方面极为复杂&#xff1b; 2.企业结构复杂&#xff0c;包括研发、销售、财务、总部、分部、办事处、销售等单位连结成为一个庞大的企业组织&#xff0c;数据产生、存储、流转、使用、销毁变化…

NIO线程模型

NIO线程模型主要涉及以下几个方面&#xff1a; 一、基本概念 NIO&#xff08;New Input/Output&#xff09;是Java的一种新的输入输出模型&#xff0c;也被称为非阻塞IO。其核心特点是数据读写操作均是非阻塞的&#xff0c;即在进行读写操作时&#xff0c;若数据未准备好&…

第129天:内网安全-横向移动WmiSmbCrackMapExecProxyChainsImpacket

这里这个环境继续上一篇文章搭建的环境 案例一&#xff1a; 域横向移动-WMI-自带&命令&套件&插件 首先上线win2008 首先提权到system权限 wmic是windows自带的命令&#xff0c;可以通过135端口进行连接利用&#xff0c;只支持明文方式&#xff0c;优点是不用上传别…

【区块链+医疗健康】医链 - 区块链医疗信息管理系统 | FISCO BCOS应用案例

根据《“十四五”规划和 2035 远景目标纲要》&#xff0c;我国在“十四五”时期将全面推进医疗信息化建设。工信部等部 门联合发布《关于加快推动区块链技术应用和产业发展的指导意见》&#xff0c;促进区块链在医疗健康等公共服务领域开 展应用&#xff0c;促进业务协同办理。…

ES6 export import

1.Export 模块是独立的文件&#xff0c;该文件内部的所有的变量外部都无法获取。如果希望获取某个变量&#xff0c;必须通过export输出&#xff0c; 声明的同时导出变量、函数以及类 // profile.js export var firstName Michael; export var lastName Jackson; export var…

【JUC】Java对象内存布局和对象头

文章目录 面试题Object object new Object() 谈谈你对这句话的理解&#xff1f; 对象在堆内存中存储布局权威定义&#xff08;周志明老师JVM第三版&#xff09;对象在堆内存中的存储布局详解对象头的MarkWord源码对象标记源码 对象内存布局&#xff08;使用JOL证明&#xff09…

猫头虎 分享已解决Bug || java.lang.NullPointerException 解决方案

&#x1f42f; 猫头虎 分享已解决Bug || java.lang.NullPointerException 解决方案 在 后端开发过程中&#xff0c;我们经常会遇到各种各样的Bug。而其中最常见之一就是 java.lang.NullPointerException。很多小伙伴在遇到这个问题时&#xff0c;往往会感到非常头痛&#xff0…

设计模式-单一职责模式

DecoratorBridge Decorator 动机 在某些情况下我们可能会 “过度地使用继承来扩展对象的功能”&#xff0c;由于继承为类型引入的静态特质&#xff0c;使得这种扩展方式缺乏灵活性&#xff1b;并且随着子类的增多&#xff08;扩展功能的增多&#xff09;&#xff0c;各种子类的…

yolov8断点续训

1. 前言 我们在使用yolov8进行训练的时候往往会因为各种各样的原因中断训练&#xff0c;如&#xff1a; 开了太多程序导致崩溃突然断电其他原因 这时候如果下次能继续上次训练的结果继续训练会节省很多时间 2.复现与解决办法 2.1 正常启动训练 yolov8环境搭建与简单配置请…

给 Python 的第三方模块安装工具 pip 换源

sudo mkdir ~/.pipcd .pipsudo nano pip.conf[global] timeout 10 index-url http://mirrors.aliyun.com/pypi/simple/ extra-index-url http://pypi.douban.com/simple/ [install] trusted-hostmirrors.aliyun.compypi.douban.com喜欢或对你有帮助&#xff0c;点个赞吧&…

PMBOK® 第六版 规划范围管理

目录 读后感—PMBOK第六版 目录 规划范围管理就像是为项目划定清晰的界限&#xff0c;通过书面形式明确项目团队必须完成的工作&#xff0c;这有助于有效控制和交付目标产品&#xff0c;防止范围蔓延&#xff0c;合理分配资源&#xff0c;从而提高项目成功率和客户满意度。 一…

Tomcat搭建JSPServlet

一、Tomcat环境搭建 1. 将项目变为Web项目 选中项目&#xff0c;点击Help中的Find Action 搜索Add Framework Support 勾选Web Application 出现这些文件就是成功了 2. 配置Tomcat 点击Edit Configurations 点击加号&#xff0c;选择Tomcat Server Local Deployment栏下点击…

WPF篇(9)-CheckBox复选框+RadioButton单选框+RepeatButton重复按钮

CheckBox复选框 CheckBox继承于ToggleButton&#xff0c;而ToggleButton继承于ButtonBase基类。 案例 前端代码 <StackPanel Orientation"Horizontal" HorizontalAlignment"Center" VerticalAlignment"Center"><TextBlock Text"…

前端学习笔记-JS篇-01

JS基础Day1-01-必看-基本软件以及准备工作_哔哩哔哩_bilibili JavaScript介绍 是什么 1.JavaScript (是什么?) 是一种运行在客户端(浏览器)的编程语言&#xff0c;实现人机交互效果2.作用(做什么?) 网页特效(监听用户的一些行为让网页作出对应的反馈)表单验证(针对表单…

8.9-python管理

一、回顾 [rootpython ~]# vim test.py ​ a3 b4 print(ab) print(a**2b**2) print(25**0.5) ​ [rootpython ~]# python3 test.py 7 25 5.0 ​ ​ #调试test.py脚本 [rootpython ~]# python3 -m pdb test.py > /root/test.py(1)<module>() -> a3 (Pdb) n > …