使用html2canvas和jspdf导出pdf包含跨页以及页脚

首先要下载两个文件,一个为html2canvas.min.js,另一个是jspdf.umd.min.js这两个文件分别下载的地址我也附录上,都在官网git:

html2canvas.min.js: https://html2canvas.hertzen.com/dist/html2canvas.min.js

jspdf.umd.min.js: jsPDF/dist/jspdf.umd.min.js at master · parallax/jsPDF · GitHub

jspdf.umd.min.js去dist中获取

我都是建立文件然后复制粘贴进去,这样比较方便

之后就是放到我们的项目中然后全局引入就可以了

之后就可以在使用的地方写我们的代码了

这个里面我加入了黑体这个字体因为在添加页脚的时候,中文会进行乱码

这个乱码处理是我首先把jspdf项目从git上下载下来:https://github.com/parallax/jsPDF

之后打开下图这个文件中的html文件

然后出来的就是这个之后我们需要下载一个.ttf字体文件:SimHei.ttf|字体下载

下载之后我们就可以通过选择文件按钮把.ttf文件上传到上面然后我们命名一个fontName,然后点击create生成一个字体的js文件,如果你的是vue项目那么直接引入使用即可,但是如果不是,我进行的处理是把其中的font复制出来自己建一个js文件

把这个font字体绑定在window上这个全局都可以进行使用

引入这个文件都在最上面第二张图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker 快速搭建 MongoDB 4.x 集群(一主一从)

目录 1. 生成 mongo-file2. 启动主节点3. 启动从节点4. 配置副本集5. 注意事项 环境:MongoDB 4.0.25,Alma Linux(建议使用 Linux) 部署的时候是在同一个及其上操作的,实际可以放在不同机器上。 截止到 2024年05月&…

OceanBase数据库诊断调优,与高可用架构——【DBA从入门到实践】第八期

在学习了《DBA从入门到实践》的前几期课程后,大家对OceanBase的安装部署、日常运维、数据迁移以及业务开发等方面应当已经有了全面的认识。若在实际应用中遇到任何疑问或挑战,欢迎您在OceanBase社区问答论坛中交流、讨论。此次,《DBA从入门到…

如何学到数据库从入门到入土(MySQL篇)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人能接…

以太坊现货ETF获批:引发ETH价格暴涨,市场热议达到高潮

2024年5月24日,北京时间,以太坊现货ETF正式获得美国证券交易委员会(SEC)的批准,成为继比特币之后,美国主权政府承认的又一加密货币基金产品。这一意外的利好消息引发了加密货币市场的狂欢,以太坊…

阳光电源临摹品引发的EMC正向设计思考

画画可以临摹。画电路板临摹的人更多。 抄板,抄的是过去的板子,容易出问题。现在市场竞争激烈,欧美客户对出口产品的标准要求推陈出新,防不胜防。由于市场的竞争,欧洲客户已经意识到EMC电磁兼容的重要性,不…

【PID算法详解】

PID算法 PID算法介绍用途pid数学表达式及其含义P算法D算法I算法 PID总结数学公式转换代码设计实际运用PID代码实现 PID算法介绍 PID控制器是一种广泛应用于工业控制系统的反馈控制器,它通过比例(Proportional)、积分(Integral&am…

LeetCode450删除二叉搜索树中的节点

题目描述 给定一个二叉搜索树的根节点 root 和一个值 key,删除二叉搜索树中的 key 对应的节点,并保证二叉搜索树的性质不变。返回二叉搜索树(有可能被更新)的根节点的引用。一般来说,删除节点可分为两个步骤&#xff1…

合约的值类型

基本数据类型:整数、枚举、布尔(类似java的数据类型)Address、Contract(这两种是solidity特有的数据类型)Fixed byte array(定长字节数组) Integer(int/uint) int/uint 以8位字节递增&#xf…

代码随想录算法训练营Day2|977.有序数组的平方、59.螺旋矩阵||、 209.长度最小的子数组

977.有序数组的平方 这道题给出的原数组有两个特点: 1、由小到大 2、有负数有正数 因此,这个数组平方后的数应该是从两头向中间的0减小的,但是两头的大小需要我们用两个指针便历之后去判断大小。在遍历的同时left指针向右走,righ…

Spring使用的设计模式

Spring 框架是一个广泛使用的 Java 框架,它内部使用了多种设计模式来简化开发过程、提高代码的可维护性和扩展性。 以下是一些在 Spring 框架中常见的设计模式,以及用代码示例来解释它们: 一、工厂模式(Factory Pattern&#xff…

DIYGW UniApp可视化开发工具:前端开发人员的新宠

在前端开发的领域中,API接口的测试与调试一直是开发人员面临的挑战之一。传统的测试工具虽然能够完成基本的测试任务,但在效率、易用性和直观性方面仍有提升的空间。随着技术的发展,DIYGW UniApp可视化工具应运而生,为开发人员提供…

智慧园区:打造未来城市的新模式

随着城市化进程的加速和科技创新的推动,城市面临着诸多挑战和机遇。如何提升城市的竞争力和可持续性,是一个亟待解决的问题。在这个背景下,智慧园区作为一种新型的城市发展模式,引起了越来越多的关注和探索。 什么是智慧园区&…

gitlab将本地文件项目上传至gitlab服务

打开gitlab网页界面,登陆管理员账号 (测试服务器安装的gitlab,浏览器输入ip或配置的gitlab地址) 创建新项目 使用gitlab创建项目 创建一个新项目(忽略分组) (忽略分组) 在创建工…

CSS文本粒子动画特效之爱心粒子文字特效-Canvas

1. 效果图 2.完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;paddin…

一篇文章带你快速搞定Kafka术语no.2

在Kafka的世界中有很多概念和术语是需要你提前理解并熟练掌握的&#xff0c;这对于后面你深入学习Kafka各种功能和特性将大有裨益。下面我来盘点一下Kafka的各种术语。 在专栏的第一期我说过Kafka属于分布式的消息引擎系统&#xff0c;它的主要功能是提供一套完备的消息发布与…

全球排名第一的免费开源ERP:Odoo与微信集成的应用场景解析

概述 本文介绍了世界排名第一的开源免费企业应用软件Odoo ERP和企业微信、个人微信的各种对接功能。包括微信登录的对接、微信公众号的对接、微信消息的对接、微信支付的对接、微信打卡的对接、微信小程序的对接。 微信登录的对接 Odoo的登录&#xff0c;除了标准的用户名/密码…

律所电子签章有效吗,怎么操作?

电子签章在很多国家和地区是合法有效的&#xff0c;但其有效性、使用条件和操作流程可能依据具体的法律法规而有所不同。在中国&#xff0c;随着《中华人民共和国电子签名法》的实施&#xff0c;电子签章在满足一定条件下是具有法律效力的。电子签章可以提高合同签订的效率&…

QT 自定义协议TCP传输文件

后面附带实例的下载地址 一、将文件看做是由:文件头+文件内容组成,其中文件头包含文件的一些信息:文件名称、文件大小等。 二、文件头单独发送,文件内容切块发送。 三、每次发送信息格式:发送内容大小、发送内容类型(文件头或是文件块内容)、文件块内容。 四、效果展…

【香橙派 AIpro】OrangePi AIpro :教育、机器人、无人机领域的超级AI大脑,华为昇腾处理器驱动的AI开发板新标杆

【OrangePi AIpro&#xff1a;教育、机器人、无人机领域的超级AI大脑&#xff0c;华为昇腾处理器驱动的AI开发板新标杆】 文章目录 一、开箱与初印象1. 初印象2. 上手开机3. 安装和运行 TightVNC 远程桌面3.1. 安装 TightVNC 服务器3.2. 启动 VNC 服务器3.3. 在 Windows 上使用…

clickhouse 特性——clickhouse 基础篇(一)

文章目录 列式存储向量化查询执行引擎数据压缩使用磁盘支持SQL实时数据更新 列式存储 列式存储的目的有两个&#xff0c;一是缩小数据扫描范围&#xff0c;二是减少数据传输大小&#xff0c; 因此列存储和数据压缩通常是伴生的&#xff0c;列存储是数据压缩的前提。列存储的好…