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

news2024/9/22 21:36:56

首先要下载两个文件,一个为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.coloradmin.cn/o/1706875.html

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

相关文章

Java 文件操作和输入输出流

在 Java 编程中,文件操作和输入输出流是非常常见和重要的任务,它们允许你读取和写入文件、处理数据流等。 文件操作概述 文件操作是指对文件进行创建、读取、写入、删除等操作的过程。在 Java 中,文件操作通常涉及到使用文件对象、输入输出…

React-组件基础使用

组件是什么 概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次 组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用 React组件 在React中,一个组件就是首…

美颜技术揭秘:美颜SDK与美颜接口的开发实践

一、美颜技术的基本原理 1.1面部检测与特征点识别 面部检测是美颜技术的第一步,通过计算机视觉算法检测图像中的人脸位置。常用的方法有Haar特征、卷积神经网络(CNN)等。 1.2图像增强与美化 -磨皮 -美白 -眼部增强 -脸型优化 1.3实时处…

【torchrl】强化学习训练流程

1 采集数据阶段 上面这个循环是用来采集数据,并且加入到replay buffer中。最终获取的数据是 - s: 当前状态,或者observation - a: 当前动作,后面重要性采样需要用到 - pa: 选择当前动作的概率,后面重要性采样用到 - r: 当前的奖励…

MVCC机制

个人理解篇,不一定对,应付面试的时候看的 MVCC(Multi-Version Concurrency Control)全称多版本并发控制,主要用在隔离模式下的提交读、可重复读模式下,依赖于readview和undolog链 一、readview 1、结构 字段 备注 m_ids 活跃…

合作伙伴推广不积极?跟奖金到账时间有关!

在推广返现活动中,对于合作伙伴推广者来说,奖金是否及时到账是他们最关心的问题之一。如果品牌主一直不审批奖励数据,推广者则无法及时收到奖金,这很容易影响他们的推广积极性和忠诚度。怎样能够提高奖励审核的效率呢?…

失落的方舟台服账号怎么注册 失落的方舟台服注册收不到验证码

《失落的方舟》(Lost Ark)是由韩国Smilegate公司研发的一款大型多人在线角色扮演游戏(MMORPG)。该游戏以其精美的画面、丰富的剧情、动作类游戏的战斗手感以及广阔的开放世界而著称,自发布以来便吸引了全球众多游戏玩家…

边缘计算网关的主要功能有哪些?天拓四方

随着物联网(IoT)的快速发展和普及,边缘计算网关已经成为了数据处理和传输的重要枢纽。作为一种集成数据采集、协议转换、数据处理、数据聚合和远程控制等多种功能的设备,边缘计算网关在降低网络延迟、提高数据处理效率以及减轻云数…

k8s中的集群调度

文章目录 k8s中的集群调度Pod 创建流程 通过指定节点来创建pod所在的node节点通过标签来指定pod创建在哪个节点上pod 的亲和性Pod的亲和性和反亲和性亲和性(Affinity)反亲和性(Anti-Affinity) 污点与容忍污点(Taint&am…

探索未来设计新境界,PSAI插件 艺术创作神器来袭!

想象一下,如果有一个工具,能够让你的设计工作变得既简单又高效,那会是怎样的体验?现在,梦想成真了! 这是一款革命性的PSAI设计插件,专为创意人士打造。它将彻底改变你的设计流程,让你…

【python脚本】修改目标检测的xml标签(VOC)类别名

需求: 在集成多个数据集一同训练时,可能会存在不同数据集针对同一种目标有不同的类名,可以通过python脚本修改数据内的类名映射,实现统一数据集标签名的目的。 代码: # -*- coding: utf-8 -*- # Time : 2023/9/11 1…

js setTimeout、setInterval、promise、async await执行顺序梳理

基础知识 async: 关键字用于标记一个函数为异步函数,该函数中有一个或多个promise对象,需要等待执行完成后才会继续执行。 await:关键字,用于等待一个promise对象执行完,并返回其中的值,只能在async函数内部使用。可…

RT_Thread内核源码分析(一)——CM3内核和上下文切换

目录 一、程序存储分析 1.1 CM3内核寻址空间映射 1.2 程序静态存储和动态执行 二、CM3内核相关知识 2.1 操作模式和特权极别 2.2 环境相关寄存器 2.2.1 通用寄存器组, 2.2.2 状态寄存器组 2.2.3 模式切换环境自动保存 2.2.4 函数调用形参位置 2.3 …

OC IOS 文件解压缩预览

热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧,come on。。。 引用第三方库: pod SSZipArchive 开发实现: 一、控制器实现 头文件控制器定义: // // ZipRarViewController.h // // Created by carbonzhao on 2…

solidworks 3D草图案例2-方块异形切

单位mm 单位mm 长方体 底面是48mm*48mm,高为60mm 3D草图 点击线,根据三视图,绘制角度线, 由于三点确定一个面,因此确定三点就可以了 基准面 点击参考几何体-基准面,依次点击3个点 曲面切除 完成后点击插…

02--大数据Hadoop集群实战

前言: 前面整理了hadoop概念内容,写了一些概念和本地部署和伪分布式两种,比较偏向概念或实验,今天来整理一下在项目中实际使用的一些知识点。 1、基础概念 1.1、完全分布式 Hadoop是一个开源的分布式存储和计算框架&#xff0…

Serverless应用引擎SAE评测|一分钟部署在线游戏

Serverless应用引擎SAE评测|一分钟部署在线游戏 什么是Serverless应用引擎SAE一分钟部署在线游戏SAE控制台 资源释放其他操作 在进行Serverless应用引擎SAE评测之前,首先需要了解一下什么是SAE。 什么是Serverless应用引擎SAE Serverless应用引擎SAE(Se…

超频是什么意思?超频的好处和坏处

你是否曾经听说过超频?在电脑爱好者的圈子里,这个词似乎非常熟悉,但对很多普通用户来说,它可能还是一个神秘而陌生的存在。 电脑超频是什么意思 电脑超频(Overclocking),顾名思义,是…

C++面向对象程序设计 - 标准输出流

在C中,标准输出流通常指的是与标准输出设备(通常是终端或控制台)相关联的流对象。这个流对象在C标准库中被定义为std::cout、std::err、std::clog,它们是std::ostream类的一个实例。 一、cout,cerr和clog流 ostream类…

VLDB ’25 最后 6 天截稿,58 个顶会信息纵览;ISPRS 城市分割数据集上线

「顶会」板块上线 hyper.ai 官网啦!该板块为大家提供最新最全的 CCF A 类计算机顶会信息,包含会议简介、截稿倒计时、投稿链接等。 你是不是已经注册了顶会,但对截稿时间较为模糊,老是在临近 ddl 时才匆忙提交;又或者…