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…...
Frida启动报错invalid address?手把手教你修复Android逆向工程环境
Frida启动报错invalid address?手把手教你修复Android逆向工程环境 当你满怀期待地启动Frida准备进行Android应用动态分析时,控制台突然抛出"invalid address"错误,那种感觉就像赛车手在起跑线上发现引擎故障。这个看似简单的错误信…...
从加速度传感器到Symbol生成:Cadence VerilogA建模避坑指南
从加速度传感器到Symbol生成:Cadence VerilogA建模避坑指南 在MEMS传感器设计领域,将物理量精确转化为可仿真的电学模型是每个硬件工程师必须掌握的技能。三明治式加速度传感器作为典型的多物理场耦合器件,其VerilogA行为级建模过程既考验工…...
别再只用Unity做游戏了!用Game4Automation PRO插件,手把手教你搭建一条虚拟生产线(附PLC连接避坑指南)
跨界开发者的工业仿真指南:用Unity打造虚拟生产线全流程 当游戏开发者遇上工业自动化,会碰撞出怎样的火花?Unity作为全球最流行的游戏引擎之一,早已突破了娱乐产业的边界。今天,我们将探索如何利用Game4Automation PRO…...
如何在Java中使用Thread创建线程
在Java中使用Thread类创建线程是一种常见而直接的方式。你可以继承Thread类并重写其run()定义线程执行的任务的方法。当调用线程对象时start()JVM将为该线程分配资源并自动执行该方法run()方法中的代码。继承Thread类,重写run方法创建线程的第一步是定义一个类继承T…...
5步解锁d2s-editor:暗黑2玩家的单机存档定制工具
5步解锁d2s-editor:暗黑2玩家的单机存档定制工具 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor d2s-editor是一款基于Vue.js构建的暗黑破坏神2存档编辑工具,专为单机玩家设计,提供角色属性修…...
双屏生产力拉满!YogaBook 9i 多屏操作玩法与效率指南
YogaBook 9i 凭借独特的双屏设计,打破了传统笔记本的使用边界,成为移动办公、创意创作、高效学习的热门机型。但很多用户拿到手后,只把它当作普通笔记本使用,没能发挥双屏协同的真正优势,多任务处理、分屏操作、跨屏交…...
简单三步上手:bilibili-parse视频解析工具完整指南
简单三步上手:bilibili-parse视频解析工具完整指南 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse 还在为无法离线观看B站视频而烦恼吗?bilibili-parse是一个强大的B站视频解析…...
2026论文写作工具红黑榜:AI论文工具怎么选?用数据说话!
2026年论文写作工具红黑榜出炉,千笔AI、ThouPen、豆包位列红榜,适配国内学术规范,助力高效科研。黑榜需避开低质免费工具、无真实引用平台及过度依赖全文生成的工具。选择时建议按需求匹配度 - 数据可信度 - 成本承受力三维模型进行评估。 一…...
开源AI工具降本增效:Pixel Fashion Atelier助力小型工作室节省70%概念图外包成本
开源AI工具降本增效:Pixel Fashion Atelier助力小型工作室节省70%概念图外包成本 1. 项目概述 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的开源图像生成工具,专为时尚设计领域打造。它通过创新的像素风格界面和优化的模型组合&am…...
2026年网盘性价比终极对决,10款网盘实测
上传龟速、下载受限、会员条约复杂——这是不少用户在2026年使用网盘时的真实痛点。面对市面上琳琅满目的云存储选项,很多人陷入了选择焦虑。为了解决这一问题,我们将视角聚焦于“效率”与“安全”,对市面上的10款主流网盘进行了系统性实测。…...
