JS-页面截图下载为pdf

这个需要两个 js 库支持,html2canvas 和 jspdf。

下载:
npm install html2canvas --save
npm install jspdf–save
引用:
import { jsPDF } from ‘jspdf’;
import html2canvas from ‘html2canvas’;

直接上代码:

const downloadPDF = () => {const element: any = document.querySelector('.app');// const { scrollHeight, scrollWidth, offsetHeight, height } = element;const opts = {scale: 3, // 缩放比例,提高生成图片清晰度useCORS: true, // 允许加载跨域的图片allowTaint: false, // 允许图片跨域,和 useCORS 二者不可共同使用tainttest: true, // 检测每张图片都已经加载完成logging: true, // 日志开关,发布的时候记得改成 falseheight: element.offsetHeight};html2canvas(element, opts).then((canvas) => {let contentWidth = canvas.width;let contentHeight = canvas.height;let pageHeight = contentWidth / 592.28 * 841.89 - 40;let leftHeight = contentHeight;let position = 20;let imgWidth = 570;let imgHeight = 592.28 / contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);let PDF = new jsPDF('p', 'pt', 'a4');if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 14, 20, imgWidth, imgHeight);} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 14, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {PDF.addPage();}}}PDF.save(2222 + '.pdf');});
};

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

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

相关文章

哪个城市的Delphier最多?Delphier平均年龄多大了?

先来看看哪个城市的Delphier最多&#xff1a; 北上广深不是白叫的&#xff0c; 大家想换工作&#xff0c;就去这些大城市&#xff0c;机会多。 有人会觉得奇怪&#xff0c;怎么才这么几个人&#xff1f; 因为以上数据统计基数为2000人&#xff0c; 根据微信公众号和QQ群得出…

Linux1(介绍与基本命令1)

目录 一、初始Linux 1. Linux的起源 2. Linux是什么&#xff1f; 3. Linux内核版本 4. Linux的应用 5. 终端 6. Shell 7. Linux目录结构 二、基本命令 1. 基本的命令格式 2. shutdown 关机命令 3. pwd 当前工作目录 4. ls 查看目录内容 5. cd 改变工作目录 …

国际荐酒师携手各国际荐酒师专业委员会深化2024年度合作

国际荐酒师&#xff08;香港&#xff09;协会携手广东海上丝绸之路文化促进会及广东省城镇化发展研究会&#xff0c;深化2024年度合作&#xff0c;共同打造品荐与传播大师班培养荐酒师专业人材 近日&#xff0c;国际荐酒师&#xff08;香港&#xff09;协会、广东海上丝绸之路…

学会python——制作一款天气查询工具(python实例七)

目录 1、认识Python 2、环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3、天气查询工具 3.1 代码构思 3.2 代码示例 3.3 运行结果 4、总结 1、认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的…

Redis在微服务架构中的角色:服务间通信与数据共享

I. 引言 A. 介绍微服务架构的概念和特点 微服务架构是一种设计模式,它将一个大型的单体应用分解成一组小的服务,每个服务都运行在其自身的进程中,独立地进行部署和扩展。这些服务之间通过轻量级的通信机制(如HTTP RESTful API)进行交互,每个服务都围绕一个特定的业务功…

打造精致UI界面:字体设计的妙招

字体设计是UI设计的关键模块之一。字体设计是否有效可能直接实现或破坏整个UI界面。那么&#xff0c;界面设计的字体设计有哪些规范呢&#xff1f;如何设计细节字体&#xff1f;本文将解释字体设计规范的可读性、可读性和可用性&#xff0c;并介绍UI界面中的字体设计技巧。 如…

二级造价工程师建设工程造价管理试题

1、根据《建设工程质量管理条例》&#xff0c;在正常使用条件下&#xff0c;供热与供冷系统的最低保修期限是( )个采暖期、供冷期。 A.1 B.2 C.3 D.4 [答案]B 2、关于甲级工程造价咨询企业的资质标准&#xff0c;叙述错误的是( )。 A.企业与专职专业人员签订劳动合同&…

【Python】JSON

json 一、JSON1.1 概述1.2 数据结构1.3 值1.4 字符串1.5 数值 二、编程语言与JSON2.1 JavaScript与JSON2.2 Python与JSON 一、JSON 1.1 概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写。同时也易于机器解析和生成。 JSON采…

如何用大模型+知识库打造微信群里的AI问答神器!

想象一下&#xff0c;你的微信群或公众号中&#xff0c;有一个AI问答专家随时待命&#xff0c;帮助你和你的朋友们解答各种问题&#xff0c;是不是很酷&#xff1f; 现在&#xff0c;让我们来看看这个项目的技术框架&#xff0c;一步步了解它是如何构建的&#xff1a; 基础起…

zookeeper学习、配置文件参数详解

zookeeper学习、配置文件参数详解 zookeeper 配置文件参数详解tickTime 、session 的过期时间、maxSessionTimeout 三者之间的关系initLimit&#xff0c;syncLimit什么区别minSessionTimeout 默认值,**他的单位是ms** zookeeper 配置文件参数详解 ZooKeeper 是一个分布式协调服…

自动驾驶#芯片-1

概述 汽车是芯片应用场景之一&#xff0c;汽车芯片需要具备车规级。  车规级芯片对加工工艺要求不高&#xff0c;但对质量要求高。需要经过的认证过程&#xff0c;包括质量管理标准ISO/TS 16949、可靠性标准 AEC-Q100、功能安全标准ISO26262等。  汽车内不同用途的芯片要求…

Python中的深拷贝和浅拷贝

一、概述&#xff1a; Python中拷贝的方法有两种&#xff1a; 浅拷贝&#xff1a;copy()深拷贝&#xff1a;copy.deepcopy() 二、理解深拷贝和浅拷贝 2.1 拷贝的应用 浅拷贝 # 原始数据 list1 ["php", "java", "python"] # 对list进行复制…

如何卸载windows系统自带游戏

为了清晰地指导如何卸载Windows系统自带游戏&#xff0c;我们可以参考以下步骤进行&#xff1a; 方法一&#xff1a;通过控制面板卸载 打开控制面板进入程序和功能在控制面板中&#xff0c;找到并点击“程序和功能”。在程序列表中&#xff0c;找到你想要卸载的自带游戏。 方…

AI一键生成PPT工具:AIPPT网站分享

PowerPoint演示文稿作为商业沟通、教育培训以及日常汇报的重要工具&#xff0c;一份精美的ppt可以帮助我们提升演示效果以及显示我们的专业性。为了提升ppt的制作效率&#xff0c;我们可以使用AI一键智能生成ppt工具&#xff0c;这样我们就可以快速制作出高大上的PPT了。下面小…

Web攻防:SQL注入 - MySQL 盲注

SQL注入 - MySQL 盲注 1. 基于布尔 SQL 盲注1.1 LEFT() 函数1.1.1 介绍&#xff1a;1.1.2 注入语法&#xff1a;1.1.3 案例 (SQLi-Labs&#xff1a;Less-8) 1.2 ASCII() 函数 SUBSTR() 函数1.2.1 介绍&#xff1a;1.2.2 注入语法&#xff1a;1.2.3 案例 (SQLi-Labs&#xff1a…

Java——可变参数

一、可变参数 1、介绍 Java的可变参数&#xff08;Varargs&#xff09;是一种语法特性&#xff0c;允许一个方法接受不定数量的参数。可变参数的使用通过在参数类型后面添加省略号&#xff08;...&#xff09;实现。这使得方法在调用时可以传入不同数量的参数&#xff0c;而不…

Ubuntu20.04用NetworkManager的 nmcli connection modify 连接的名称或UUID 来设置IPV4 笔记240619

用NetworkManager的 nmcli connection modify 连接的名称或UUID ipv4.address 来设置IPV4 用NetworkManager的 nmcli connection modify 连接的名称或UUID ipv4.address 来设置IP 的模板 只设置修改IP 覆盖原有设置: ipv4.addresses或ipv4.addr或ipv4.a NameOrUuidOfConnec…

leetcode 二分查找·系统掌握 统计有序矩阵中的负数

题目&#xff1a; 给你一个 m * n 的矩阵 grid&#xff0c;矩阵中的元素无论是按行还是按列&#xff0c;都以非严格递减顺序排列。 请你统计并返回 grid 中 负数 的数目。 题解&#xff1a; 一种可行的解题思路是找出每一行中负数的个数再相加&#xff0c;又因为每一行单调递…

虚拟存储(Linux挂载点合并)

简介 在 Linux 中你有 3 块硬盘(或分区)分别为 100G、200G 和 300 G,如何在一个统一的路径下访问 600G 的视频文件夹呢?并且任何一个磁盘数据的损坏是不能影响其他两个磁盘中的数据,也不影响其他磁盘的正常访问。 相信大多数用户会想到几种解决办法: 买个更大的硬盘 ̄□ ̄…

Git 克隆 GitHub 仓库时遇到了 SSL 证书问题

fatal: unable to access GitHub - xxxxxxxxxxx: SSL certificate problem: unable to get local issuer certificate 使用 HTTP 代替 HTTPS: 如果 SSL 证书问题无法解决&#xff0c;您可以尝试使用 HTTP 克隆仓库&#xff08;不推荐&#xff0c;因为不安全&#xff09;。但请注…