JSpdf,前端下载大量表格数据pdf文件,不创建dom

数据量太大使用dom=》canvas=》image=》pdf.addimage方法弊端是canvas超出

浏览器承受像素会图片损害,只能将其切割转成小块的canvas,每一次调用html2canvas等待时间都很长累积时间更长,虽然最终可以做到抽取最小dom节点转canvas拼接数据,但是死卡

jspdf提供了不需要操作dom的方法,

Global - Documentation

 使用line方法和text方法可以通过传递线坐标和文字位置在pdf页上画线和文字,组成表格

function getStrLen(cItem, strLen) {let str = typeof cItem === 'string' || typeof cItem === 'number' ? cItem : 'null'let len = Math.ceil(str.length / strLen)if (len <= 1) {return str}str = String(str)let strn = ''for (let i = 0; i < len; i++) {strn = strn + str.substring(i * strLen, (i + 1) * strLen) + '\n'}return strn
}async function downPDF(list, columns) {// 1in = 2.54cm = 25.4 mm = 72pt = 6pclet tablePdf = null
//绘制表格的参数let cardTop = 10, cardLeft = 7, textLeft = 9, textTop = 14, oneColumnNum = 35, oneRowNum = 7, oneCellWidth = 28, oneCellHeight = 8, oneStrLen = 5, pdfWidth = 203, pdfHeight = 290, strLen = 8let endPageNum = 0
//表格数据的整理
//整理格式成一个二维数组,第一层以列为单个元素,元素是整列的值组成的数组let testList = columns[0].childrenlet propList = testList.map((item) => {return { prop: item.props.prop, label: item.props.label }})let dataList = []propList.forEach((item, index) => {let cArr = []cArr.push(item.label)list.forEach((cItem, cIndex) => {cArr.push(cItem[item.prop])})dataList.push(cArr)})console.log(dataList)//处理好表格数据的二维数组,配置pdf对象tablePdf = new jsPDF('p', 'mm', 'a4');
//解决中文乱码tablePdf.addFont("/fonts/SourceHanSansCN-Normal.ttf", "SourceHanSans", "normal")tablePdf.setFont("SourceHanSans");//1)doc中设置font: "SourceHanSans" // 2)style中设置tablePdf.setLineWidth(0.1)tablePdf.setFontSize(8)tablePdf.line(cardLeft, cardTop, pdfWidth, cardTop);let columnPages = Math.ceil(dataList.length / oneRowNum) + 1let rowPages = Math.ceil(dataList[0].length / oneColumnNum) + 1let currentData = []for (let i = 1; i < columnPages; i++) {
//横向分页let currentColumnData = dataList.slice((i - 1) * oneRowNum, i * oneRowNum)
//纵向分页for (let rowInddex = 1; rowInddex < rowPages; rowInddex++) {currentData = currentColumnData.map((item, index) => {return item.slice((rowInddex - 1) * oneColumnNum, rowInddex * oneColumnNum)})currentData.forEach((item, index) => {item.forEach((cItem, cIndex) => {cItem = getStrLen(cItem, strLen)//填文字,超过长度换行tablePdf.text(cItem, textLeft + index * oneCellWidth, textTop + cIndex * oneCellHeight, 'left')//画一次横线if (index === currentData.length - 1) {tablePdf.line(cardLeft, cardTop + cIndex * oneCellHeight, pdfWidth, cardTop + cIndex * oneCellHeight);//画最后一条横线if (cIndex === item.length - 1) {tablePdf.line(cardLeft, cardTop + (cIndex + 1) * oneCellHeight, pdfWidth, cardTop + (cIndex + 1) * oneCellHeight);endPageNum = item.lengthlet ks = (pdfHeight - cardTop) / oneColumnNumfor (let l = 0; l < oneRowNum + 1; l++) {tablePdf.line(cardLeft + l * oneCellWidth, cardTop, cardLeft + l * oneCellWidth, endPageNum * ks + cardTop);}}}})});if (rowInddex + 1 !== rowPages) {tablePdf.addPage();}}if (i + 1 !== columnPages) {tablePdf.addPage();}}tablePdf.save('dd.pdf')
}

 数组datalist结构

效果

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

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

相关文章

Linux基础之进程的优先级

目录 一、进程优先级的概念 二、进程优先级的查看 三、怎么修改进程优先级 四、进程饥饿 一、进程优先级的概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority&#xff09;。优先权高的进程有优先执行权利。配置进程优先权对多任务环境的linu…

Redis教程(三):Redis的五种基本数据类型

String&#xff08;字符串&#xff09; 字符串 String 是 Redis 最简单的数据结构&#xff0c;可以存储字符串、整数或者浮点数&#xff0c;常用于存储对象。 List&#xff08;列表&#xff09; 列表List相当于 Java 语言里面的 LinkedList&#xff0c;插入性能高&#xff0…

特征衍生-多变量交叉组合特征衍生

https://www.bilibili.com/video/BV1Kg411n7jv?p21&vd_source08e23da22e328e8950aeb24d2001d586

【LeetCode】每日一题:1953.你可以工作的最大周数

给你 n 个项目&#xff0c;编号从 0 到 n - 1 。同时给你一个整数数组 milestones &#xff0c;其中每个 milestones[i] 表示第 i 个项目中的阶段任务数量。 你可以按下面两个规则参与项目中的工作&#xff1a; 每周&#xff0c;你将会完成 某一个 项目中的 恰好一个 阶段任务。…

用ffmpeg和EasyDARWIN实现推流

步骤&#xff1a; 1.配置easydarwin-ini里面的端口&#xff0c;打开easydarwin.exe 查看端口号是否成功&#xff0c;若不成功&#xff0c;则需要修改 2.在web网页打开 http://localhost:10008/ 看是否成功 3.用ffmpeg打开视频 ffmpeg.exe -re -i C:/22/Rec_20200903.mp4 -v…

1757. 可回收且低脂的产品

1757. 可回收且低脂的产品 题目链接&#xff1a;1757. 可回收且低脂的产品 代码如下&#xff1a; # Write your MySQL query statement below select product_id from Products where low_fatsY and recyclableY

.NET 4.8和.NET 8.0的区别和联系、以及查看本地计算机的.NET版本

文章目录 .NET 4.8和.NET 8.0的区别查看本地计算机的.NET版本 .NET 4.8和.NET 8.0的区别 .NET 8.0 和 .NET 4.8 之间的区别主要体现在它们的发展背景、目标平台、架构设计和功能特性上。下面是它们之间的一些主要区别&#xff1a; 发展背景&#xff1a; .NET 4.8 是.NET Fram…

C++(23): C++:STL中的时间库(std::chrono)

1. 简述 C STL库中的 chrono 是一个关于日期和时间的库&#xff0c;它提供了一套丰富、灵活且类型安全的API&#xff0c;用于测量和操作时间。chrono 库是C11标准的一部分&#xff0c;它使得我们可以进行高精度的时间测量&#xff0c;以及执行基于时间点的算术操作。 2. chron…

JVM中的垃圾回收器是如何工作的?

JVM&#xff08;Java Virtual Machine&#xff09;中的垃圾回收器负责自动管理内存&#xff0c;它通过识别并释放不再被程序使用的对象来回收堆内存。以下是垃圾回收器的基本工作原理&#xff1a; 标记-清除&#xff08;Mark-Sweep&#xff09;算法&#xff1a; 初始时&#x…

美港通正规炒股市场沪指收跌0.82% 证券板块调整

5月15日电 15日,A股三大指数集体下挫。上证指数跌0.82%,报3119.9点;深证成指跌0.88%,报9583.54点;创业板指跌0.9%,报1838.89点。沪深京三市成交额7651亿元,其中沪深两市7611亿元,较上日缩量635亿元。沪深两市超3800只个股下跌。 美港通证券以其专业的服务和较低的管理费用在市…

数字集成电路物理设计[陈春章]——知识总结与精炼02

第二章 物理设计建库与验证 2.1 集成电路工艺与版图 自行了解&#xff0c;关于闩锁效应可查阅小编之前的文章。 2.2 设计规则检查&#xff08;DRC&#xff09; 定义&#xff1a;晶圆代工厂对各自不同工艺参数制定出满足芯片制造良率的同一工艺层及不同工艺层之间几何尺寸的…

ROS学习笔记(15)小车巡墙驾驶

0.前提 前一章我讲解了拉氏变换和PID&#xff0c;这一章我来讲解一下小车巡墙驾驶的理论和部分代码。 1.前情回顾 1.拉氏变换 拉普拉斯变换是要将时域问题转换成频域问题来处理。 2.PID控制器 转向角&#xff1a; 误差牺牲&#xff1a; 3.具体参看上一篇文章 2.巡墙驾驶…

「AIGC算法」图搜索算法详解

本文主要介绍图搜索算法详解和简单实例 一、原理 图搜索算法是一组用于在图结构数据上执行搜索任务的算法。图由顶点&#xff08;或称为节点&#xff09;和边组成&#xff0c;广泛应用于表示各种关系&#xff0c;如网络、路径、社交关系等。图搜索算法可以分为两大类&#xff…

【半监督学习】半监督学习中的时间集合

在本文中&#xff0c;我们提出了一种在半监督环境下训练深度神经网络的简单而高效的方法&#xff0c;在这种环境下&#xff0c;只有一小部分训练数据是有标签的。我们引入了self-ensembling技术&#xff0c;即利用网络在不同历时&#xff0c;最重要的是在不同正则化和输入增强条…

充电桩战火重燃,特来电、星星充电上演“龙虎斗”

配图来自Canva可画 小米Su7真的太火了&#xff0c;上市40天锁单量超过10万供不应求&#xff0c;给新能源汽车行业带来了新的活力&#xff0c;也促进了充电桩行业的发展。 据中国汽车工业协会数据&#xff0c;4月份新能源汽车产销分别完成87万辆和85万辆&#xff0c;同比分别增…

[LeetCode #202] 快乐数

目录 题目描述&#xff1a; 解题思路&#xff1a; 解题代码: 题目描述&#xff1a; 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变…

地表最强ChatGPT爆了!我来告诉你,它都有什么用

OpenAI刚刚发布了全新的 "GPT-4o"&#xff0c;它不仅可以通过语音、视觉和文本进行推理&#xff0c;还在速度和价格上有了巨大的突破。它的速度提高了2倍&#xff0c;价格却降低了50%&#xff0c;而且生成速率比GPT-4 Turbo高出5倍。最令人惊喜的是&#xff0c;它将对…

【prometheus】prometheus基于consul服务发现实现监控

目录 一、consul服务发现简介 1.1 consul简介 二、prometheus配置 2.1 node-exporter服务注册到consul 2.2 修改prometheus配置文件 【Prometheus】概念和工作原理介绍_prometheus工作原理-CSDN博客 【Prometheus】k8s集群部署node-exporter 【prometheus】k8s集群部署p…

Python全栈自动化测试-Python基础07--分支结构if

目录 前言 一、单项分支 二、双向分支 三、多向分支 四、巢状分支&#xff08;嵌套分支&#xff09; 五、if中的判断条件 1.条件--固定值 2.条件--运算符 总结 前言 在Python编程中&#xff0c;分支结构是一种至关重要的控制流机制&#xff0c;它允许程序根据特定条件…

[前端] 深度选择器deep使用介绍(笔记)

参考文献 深度选择器 深度选择器deep使用说明 在 Vue 中&#xff0c;为了实现组件内部样式对组件外部元素的穿透覆盖&#xff0c;可以使用 CSS 的 deep 选择器&#xff08;也称为 >>> 或 /deep/&#xff09;或 v-deep 指令。然而&#xff0c;这两个方法在 Vue 3 中…