使用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上这个全局都可以进行使用

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

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

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

相关文章

代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素

一、704. 二分查找 题目链接:https://leetcode.cn/problems/binary-search/description/ 文章讲解:https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html 视频讲解:https://www.bilibili.com/video/BV1fA4y1o715 1.…

前端实现大文件分片并行上传、断点续传、秒传(完整解析)

一、总体流程图 二、具体步骤 简单理解:前端先将文件切割多份,在进行上传,由后端进行切片合并操作。 具体逻辑: 1. 前端选中上传文件(如果是批量上传就把选中的文件存入选中文件列表数组中,后续在遍历上…

【Vue3-Element-Admin 动态路由】涉及到的配置

Vue3-Element-Admin 动态路由 涉及到的配置 0. Vue3-Element-Admin 项目地址1. router/index.ts2. Mock接口模拟数据3. store/permission4. api/menu5. plugins/permission 这篇文章讲的主要是 Vue3-Element-Admin 差不多内置的动态路由配置 (根据后端接口渲染) 先把开发环境&a…

纷享销客一体化BI智能分析平台介绍

纷享销客BI智能分析平台是一款自助式敏捷BI,无缝继承纷享销客PaaS平台的对象数据、对象关系、功能权限体系与数据权限体系,用户通过简单的拖拽点选即可实现灵活定义分析模型和可视化自助分析,零技术门槛快速上手,面向全员各类角色…

深度学习 --- stanford cs231 编程作业(assignment1,Q2: SVM分类器)

stanford cs231 编程作业之SVM分类器 写在最前面: 深度学习,或者是广义上的任何学习,都是“行千里路”胜过“读万卷书”的学识。这两天光是学了斯坦福cs231n的一些基础理论,越往后学越觉得没什么。但听的云里雾里的地方也越来越多…

【学习笔记】MySQL(Ⅰ)

MySQL(Ⅰ) 1、 介绍 1.1、概述 1.2、MySQL 的优缺点 1.4、关系型数据库模型2、 基础篇 —— SQL(结构化查询语言) 2.1、通用语法 2.2、SQL 语句的分类 2.3、DDL 语句 2.3.1 数据库结构相关的语法 2.3.2 数据表相关的语…

Java实现俄罗斯方块游戏源代码(启动即可玩)

这是一个用Java Swing实现的俄罗斯方块游戏,具有经典的游戏机制和图形界面。游戏中,玩家需要旋转和移动不断下落的方块,使其填满一行来消除该行并得分。 该项目适合学习Java GUI编程、游戏开发基础以及面向对象编程(OOP&#xff0…

【Git】分支管理 -- 详解

一、理解分支 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习 C 的时候,另一个你正在另一个平行宇宙里努力学习 JAVA。 如果两个平行宇宙互不干扰,那对现在的你也没啥影响。不过,在某个时间点,两个平行宇宙…

【Angew】:催化材料中贵金属的最大效率-原子分散表面铂

图形摘要:通过在纳米结构 CeO2的 {100}“纳米袋”中稳定表面 Pt2物种(见图) ,可以制备具有最高贵金属分散度的Pt-CeO2材料。此类材料可以大大减少催化剂所需的贵金属量。 摘要:贵金属Pt是催化领域用途最广泛的元素&am…

【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!

reduce用法详解总结 1.reduce语法说明1.1 方法介绍1.2 参数说明1.3 执行机制1.4 简单示例:数组求和 2. 高级用法2.1 权重求和2.2 代替some和every2.3 数组扁平2.4 数组去重2.5 字符统计和单词统计2.6 数组成员特性分组2.7 数字千分化 reduce函数是一个神奇的函数 1.…

C++ Qt实现http url启动本地应用程序

更多Qt文章,请访问《深入浅出C++ Qt开发技术专栏》:https://blog.csdn.net/yao_hou/category_9276099.html 我们在使用腾讯会议时经常会通过http链接打开本地的腾讯会议,例如下图: 打开会议发起人给的链接,会出现一个网页,然后点击加入会议就会启动本地的腾讯会议,本篇…

msvcp140_1.dll丢失怎么修复,这四种修复方法可轻松搞定

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp140_1.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题,本文将介绍5种常见的解决方法,帮助大家快速恢复应用程序的正常运行。 一&a…

OCP 备份 OceanBase集群

注:OCP版本为4.2.1,OceanBase版本为 社区版4.2.1.0 手动备份 进行合并 在手动进行备份数据之前,建议进行一次OB集群合并(不影响业务的前提下),关于合并的概念请参考OB官网。 点击进入要备份的OB集群 点击左侧工具栏中的 合并管理,在 基本信息…

App UI 风格:独具一格,令人惊艳

App UI 风格:独具一格,令人惊艳

交叉导轨在医疗设备上的作用!

随着医疗器械行业的需求逐步增长,交叉导轨给医疗器械行业带来了广阔的发展前景。作为重要的精密传动元件,交叉导轨具有寿命长、高精度、高刚性、高耐腐蚀性和高稳定性等优点,满足精密仪器上对产品的高要求使用场景。 在医疗设备领域中交叉导轨…

LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum)

LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum) 文章目录 LeetCode刷题 | Day 3 分割等和子集(Partition Equal Subset Sum)前言一、题目概述二、解题方法2.1 动态规划思想2.1.1 思路讲解2.1.2 伪代码 + 逐步输出示例2.1.3 Python代码如下2.1.4 C++代码如…

电脑显示找不到steam_api.dll,无法继续执行代码的详细解决办法

电脑显示找不到steam_api.dll,无法继续执行代码?其实会造成这种原因,注意是由于操作不当或者是中了病毒而导致的,我们想要解决steam_api.dll的丢失还是比较简单的,目前有多种的steam_api.dll修复方法,今天我们就来详细…

MySQL数据库常见工具的基础使用_1

在上一篇文章中提到了对MySQL数据库进行操作的一些常见工具 mysqlcheck mysqlcheck是一个用于数据库表的检查,修复,分析和优化的一个客户端程序 分析的作用是查看表的关键字分布,能够让sql生成正确的执行计划(支持InnoDB,MyISAM,NDB)检查的作用是检查…

前端逆向之下载canvas引用的图片

前端逆向之下载canvas引用的图片 一、来源二、解决三、如果在Network这里也找不到呢? 一、来源 当我们用dom检查器的时候无法选中想要扒下来的图片,只能选中canvas,这种时候该怎么办呢? 二、解决 这个时候应该换个脑子&#xf…

AI菜鸟向前飞 — LangChain系列之十六 - Agent系列:从现象看机制(下篇)一款“无需传递中间步骤“的Agent

前言 AI菜鸟向前飞 — LangChain系列之十四 - Agent系列:从现象看机制(上篇) AI菜鸟向前飞 — LangChain系列之十五 - Agent系列:从现象看机制(中篇)一个Agent的“旅行” 回顾前两篇文章,大家会…