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

需求：有多组数据，需要在同一个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', 'pt', 'a4');  //新建一个pdf，p：纵向，pt：单位，a4：a4大小
            doc.setFont('simhei')  //设置刚刚引入的字体
            let first = null  //将第一页设为空值
            infolist.forEach(info => {
                //绘制表格
                doc.autoTable({
                    body: [  //表格主体内容
                        ["予約日時:", info.createDateStr],
                        ["部屋名:", info.startTime + info.endTime + (this.shopName),],
                        ["顧客コード:", info.customerCode,],
                        ["会員番号:", info.customerCardNo,],
                        ["名前:", info.customerKana,],
                        ["電話番号:", info.homeTel,],
                        ["年齢:", info.age,],
                        ["施術部位:", bodyparts,],
                        ["備考:", info.remark,],
                        ["登録者:", info.creator,],
                        ["登録日時:", info.createDateStr,],
                        ["更新者:", info.updater,],
                        ["更新日時:", info.updateDateStr,],
                    ],
                    //设置table的主题
                    theme: "grid",
                    //Y轴开始位置
                    startY: first?first.finalY + 30:30,
                    columnStyles: {
                        0: { cellWidth: 150 },  //第一列的宽度
                    },
                    styles: {
                        font: 'simhei',  //使用引入的字体
                        fontSize: 14  //字体大小
                    },
                    pageBreak:first?'always':'auto'  //新表格是否新开一页
                })
                first = doc.autoTable.previous  //存储前一张表格
            })

            window.open(doc.output('bloburl'));  //在新页面打开当前pdf
        }

设置first的原因是因为，需求是新表格需要新开一页，当pageBreak直接设置为always或者avoid的时候，pdf都会在第一页留白，所以加first是为了判断当前表格是否是第一张表格，是则pageBreak设置为auto，否则设置为always。而且first还有重要的作用，就是记住上一张表格的位置，从而根据前面的表格定位下一张表格的位置startY，不然表格都会叠在一起。

最后导出后的效果图：