当前位置: 首页 > news >正文

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

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

相关文章:

  • 回答网友问题:在C# 中调用非托管DLL
  • 基于Spring 框架中的@Async 注解实现异步任务
  • Spring Aware接口:揭秘Bean生命周期中的“先知”角色与源码剖析
  • 第十三届蓝桥杯国赛大学B组填空题(c++)
  • window安装ffmpeg播放本地摄像头视频
  • Java面试进阶指南:高级知识点问答精粹(一)
  • Gitlab不允许使用ssh拉取代码的解决方案
  • 【NVM】持久内存的架构
  • vue3中element-plus下拉菜单与图标的使用
  • 22-LINUX--多线程and多进程TCP连接
  • 字节跳动(校招)算法原题
  • SQL生成序列浅析
  • Linux-用户管理
  • 【RabbitMQ】使用SpringAMQP的Publish/Subscribe(发布/订阅)
  • 【大模型部署】在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型
  • 【Leetcode】101. 对称二叉树
  • [iOS]Core Data浅析一 -- 启用Core Data
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • Android框架之Volley
  • android图片蒙层
  • express.js的介绍及使用
  • Java面向对象及其三大特征
  • js如何打印object对象
  • Linux gpio口使用方法
  • Promise面试题2实现异步串行执行
  • rabbitmq延迟消息示例
  • VuePress 静态网站生成
  • Zsh 开发指南(第十四篇 文件读写)
  • 订阅Forge Viewer所有的事件
  • 技术胖1-4季视频复习— (看视频笔记)
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 人脸识别最新开发经验demo
  • 限制Java线程池运行线程以及等待线程数量的策略
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 正则学习笔记
  • 终端用户监控:真实用户监控还是模拟监控?
  • scrapy中间件源码分析及常用中间件大全
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​​​【收录 Hello 算法】9.4 小结
  • ​【数据结构与算法】冒泡排序:简单易懂的排序算法解析
  • ​Spring Boot 分片上传文件
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • $.proxy和$.extend
  • (+3)1.3敏捷宣言与敏捷过程的特点
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • (c语言)strcpy函数用法
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (剑指Offer)面试题34:丑数
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .net MySql