[学习笔记]使用jsPDF和autoTable导出多个表格的pdf

本文档记录了如何使用jsPDF和autoTable库将多组数据生成为多张表格,并导出到同一PDF文件中。在实现过程中,解决了中文乱码问题,通过引入字体文件并在autoTable内定义样式来确保中文正常显示。同时,通过设置pageBreak属性,实现了新表格在新页面开始,并根据前一张表格的位置调整下一张表格的startY,防止表格重叠。最终成功生成了包含多张表格的PDF文件。
摘要由CSDN通过智能技术生成

需求:有多组数据,需要在同一个pdf里放入多张表格

autotable工具:https://github.com/simonbengtsson/jsPDF-AutoTable

一、安装jsPDF和autoTable并引入

安装:可以选择cdn或引js,我直接用npm装了,方便快捷

npm install jspdf --save
npm install jspdf jspdf-autotable

引入:

import JsPDF from "jspdf"
import 'jspdf-autotable'

二、使用

使用的过程遇到许多问题,首先,如果直接输入中文会乱码,需要引入字体文件。

解决方案:https://blog.csdn.net/lingliu0824/article/details/113872067

注意,一定要在autoTable内的styles里使用引入的字体才有效。

然后就可以绘制表格了

        gettablelistPdf(infolist) {
            const doc = new JsPDF('p',
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值