vue实现pdf下载——html2canvas
html2canvas 官方文档
https://html2canvas.hertzen.com/getting-started
html2canvas 的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片或者PDF文件。
1. 安装插件
npm install html2canvas jspdf --save
2.使用(页面已经写好)
2.1 在页面引入html2canvas
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
2.2 创建下载pdf页面的方法
methods:{downloadPdf () {var title = "证书"html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
2.3 页面调用下载方法

最终实现效果
原要下载的页面

2. 下载的pdf
相关文章:
vue实现pdf下载——html2canvas
html2canvas 官方文档https://html2canvas.hertzen.com/getting-started html2canvas 的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片或者PDF文件。 1. 安装插件 npm install html2canvas jspdf --save 2.使用(页面已经…...
安装docker+mysql的一些坑
yum -y install docker 提示missing signature 参考这里 https://www.8a.hk/news/content/8235.html 卸载旧的docker sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装…...
React Native采集数据离线存储、网络状态监控、加密上传、鉴权
在无网络环境下进行数据采集并在有网络时上传至服务器,同时确保数据的鉴权和加密,这一需求需要考虑多方面的实现细节。无论您选择原生开发还是使用React Native(甚至Expo),以下是如何实现这一需求的具体步骤和建议。 …...
网络数据库后端相关面试题(其三)
18, 传输控制协议tcp和用户数据报协议udp有哪些区别 第一,tcp是面向字节流的,基本的传输单位是tcp报文段;而udp是面向报文的,基本传输单位是用户数据报。 第二, tcp注重安全可靠性,连接双方在…...
Hadoop之HDFS分布式文件系统
HDFS简介 Hadoop Distributed File System (HDFS): HDFS 是 Hadoop 的分布式文件系统,它设计用于存储大量数据,并提供 高吞吐率的数据访问,通过将数据分块存储在多个节点上,实现数据的冗余存储和容错。 HDFS重要概念 HDFS 通过统一的命名空间目录树来定位文件; 另外,它…...
插入删除单链表指定结点-偷天换日法
王道说下面的代码有BUG,比如当删除的结点p在最后一个元素时,p->nextNULL; So *q NULL; q->data就是错误的,我认为加个判断就行 加个判断即可 /*看着是删除q了,从结果上看就是把p删除了 偷天换日法*/ bool DeleteNode(LNod…...
MybatisPlus代码生成器使用案例
针对数据库中的实体类表,自动生成相关的pojo类,mapper,service等 1. Get-Started 基于mybatisplus,idea下载mybatisplus插件 sql文件 /*!40101 SET OLD_CHARACTER_SET_CLIENTCHARACTER_SET_CLIENT */; /*!40101 SET NAMES utf8 …...
数学公式编辑器(前端预研)
数学公式输入wangeditor: vue2使用wangeditor实现数学公式和富文本编辑器 mathjax文档:MathJax: 让前端支持数学公式 mathjax识别数学公式vue中使用mathjax识别latex数学公式 数学公式编辑器:(少) https://github.com…...
架构设计-如何安全地传输密码
java web 项目中经常会遇到登录或注册的场景,如果查看浏览器的 network 网络请求时,用户的密码以明文方式传输,会造成很多安全隐患,这就涉及到密码如何安全传输的问题。 数据加密的重要性不言而喻,通用的加密技术有 哈希散列、对称加密、非对称加密。 哈希散列 哈希散列是…...
【库】nprogress 顶部进度条
yarn add nprogress router文件 前置路由添加启动 后置路由添加关闭 router.beforeEach((to, from, next) > { NProgress.start() next() }) router.afterEach(() > { NProgress.done() }) App.vue 文件 引入样式 <script setup> import "nprogress/npro…...
15、架构-可靠通讯之服务安全
概述 我们已经了解了与具体架构形式无关的业界主流安全概念和技术标准(如TLS、JWT、OAuth 2等概念),在上一章节探讨了与微服务运作特点相适应的零信任安全模型。在本节中,我们将从实践和编码的角度出发,介绍在微服务时…...
web刷题记录(5)
[羊城杯 2020]easycon 进来以后就是一个默认测试页面, 在这种默认界面里,我觉得一般不会有什么注入点之类的,所以这里先选择用御剑扫扫目录看看有没有什么存在关键信息的页面 扫了一半发现,很多都是和index.php文件有关࿰…...
Redis高并发高可用
1. 复制机制 在分布式系统中,为了解决单点问题,通常会将数据复制多个副本部署到其他机器,以满足故障恢复和负载均衡等需求。Redis提供了复制功能,实现了相同数据的多个Redis副本。复制功能是高可用Redis的基础,后面的…...
【前端取不到cookie的的原因】http-only
某条cookie有http-only属性时,下面两种方法都取不到,还是改需求吧,别取了 1、 npm install js-cookie --save import Cookies from js-cookie let cookieValue Cookies.get(name)2、document.cookie...
推荐 2 个 火火火火 的开源项目
推荐两个开源项目,一个能让你的小爱音响更聪明。另外一个可以让你简单的下载互联网网站上的视频、文件、富文本内容。 01 MiGPT: 让你的小爱音响更聪明 让你的小爱音箱更聪明,提高智能家居的互动性和个性化体验的开源利器! MiGPT 将 ChatGPT …...
从0到100:找搭子小程序开发笔记(一)
背景调查 “找搭子”小程序:能够解决人们在社交、休闲和约会方面的需求,提供方便快捷的方式来找到合适的伴侣或活动伙伴。许多人在社交场合中感到焦虑或不安,因此他们更倾向于使用在线平台来认识新的朋友或搭子。有些人可能生活在一个较小或…...
迷宫最短路径求解--c++
【代码】 #include<iostream> #include<queue> #include<stack> using namespace std; #define ROW 8 #define COL 8 //测试迷宫数据 int maze[ROW][COL] {{0,0,0,1,0,0,0,0},{0,1,0,1,0,1,0,1},{0,1,0,0,0,1,0,1},{0,1,0,1,1,1,0,1},{0,1,0,1,1,0,0,0},{0…...
SpringFramework总结
一.SpringFramework介绍 (一)Spring 广义上的 Spring 泛指以 Spring Framework 为基础的 Spring 技术栈。 Spring 已经不再是一个单纯的应用框架,而是逐渐发展成为一个由多个不同子项目(模块)组成的成熟技术,例如 Spring Frame…...
品牌与产品:消费者决策的经济逻辑与品牌宣传的战略意义
在当今日益全球化的经济环境中,品牌与产品之间的关系对于企业的成功与否起着至关重要的作用。然而,在消费者做出购买决策时,他们到底是在选择产品本身,还是在选择附着在产品之上的品牌价值?同样,当客户选择…...
MFC四种方法编写多线程
本文以四个demo为例,对MFC的多线程进行学习。学习的过程中写了四个demo,将其做成笔记,发布在csdn上面。 mfc多线程demo1 volatile BOOL m_bRun; CEdit* edit; void ThreadFunc(){CTime time;CString strTime;m_bRun true;while(m_bRun){ti…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
