为jsPDF.autoTable表格设置页尾

前端做打印的时候是一件非常麻烦的事，通常需要先将内容转成PDF，再打开PDF进行打印。还好有了JsPDF和JsPDF-AutoTable使得这一切没那么难。但是在需要为表格后面设置页尾时还是想当麻烦，因为表格大小不能确定。而且网上的资料和官方的文档也相当有限。以下是我经过长时间研究后得到了个较为满意的结果。

• 最后一页设置页尾

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf-autotable/3.2.15/jspdf.plugin.autotable.js"></script>
<script src="~/Font/msyh-normal.js"></script>
<script src="~/Font/msyhBold-normal.js"></script>
var doc = new jsPDF();
doc.setFont("msyh");//jsPDF设置中文字体需要手动导入字体库
doc.setFontSize(10);
doc.text(`这里是固定的表头：`, 10, 35);
doc.text(`时间：`, 150, 35);
doc.text(`日期：`, 10, 45);
doc.text(`注释：`, 150, 45);
doc.text(`代码：`, 10, 55);
doc.text(`注释：`, 90, 55);
doc.text(`作者：`, 150, 55);
doc.autoTable({
            columns: columns,
            body: list,
            //foot:[["id","22","66"]],页脚 这个是自带的页脚，但是其实是跟表头一样的格式，不能满足我的需求
            theme: "grid", // 主题 : 'striped', 'grid' or 'plain'
            showHead: "everyPage",
            styles: {
                fontSize: 10,
                font: "msyh",
                fontStyle: "normal",
                textColor: 0,
                halign: "left", // left, center, right
                valign: "middle", // top, middle, bottom
                overflow: "linebreak",
                cellPadding: {
                    top: 1,
                    right: 1,
                    bottom: 1,
                    left: 1
                } //单元格边距
            },
            //showFoot: 'lastPage', //最后一页显示页尾  
            addPageContent: (data) => {
                //data.table.finalY 表格最大可容纳y轴坐标，超出时将根据设置决定是否另取一页.在页面需要分页时出现
                let tabHeigth = data.table.height,
                    tabMarginTop = data.settings.margin.top,
                    tabSize = data.table.finalY - tabMarginTop,//表格最大Y轴-表格顶部距离得到每页表格的最大值
                    tabMarginLeft = data.settings.margin.left;
                if (data.table.finalY)//是否分页 有分页时才有该属性finalY
                    if (data.pageNumber != Math.ceil(tabHeigth / tabSize)) return;//如果需要每一页都显示页尾则注释该行代码
                //data.cursor.y ,data.cursor.x:表格最后一个单元坐标
                doc.autoTableText(
                    "页脚：",
                    tabMarginLeft,
                    data.cursor.y + 10,
                    alignOptionlfet
                );
                doc.autoTableText(
                    "居中：",
                    tabMarginLeft + 75,
                    data.cursor.y + 10,
                    alignOptionlfet
                );
                doc.autoTableText(
                    "日期：2020-4-6",
                    tabMarginLeft + 150,
                    data.cursor.y + 10,
                    alignOptionlfet
                );
            },
            columnStyles: colStyle,
            pageBreak: "avoid",//如果没有足够的空间容纳当前页面上的整个表格，它将在新页面上启动。如果空间足够，则不会添加新页面。
            margin: {
                top: 60,
                left: 10,
                right: 10,
                bottom: 10
            }
        });

jsPDF官方文档。
cursor: { x: number, y: number } To draw each table this plugin keeps a cursor state where the next cell/row should be drawn. You can assign new values to this cursor to dynamically change how the cells and rows are drawn.
为了绘制每个表，此插件保持光标状态，在该状态下应绘制下一个单元格/行。您可以为该光标分配新值，以动态更改单元格和行的绘制方式。
(谷歌翻译)

单行PDF表格预览：

补充一下关于：columnStyles: colStyle,
这个colStyle 是我自己定义的一个对象。作用是设置表格的样式，如：列的宽度

let columns = pdfColumns(),
            colStyle = {},
             alignOptionlfet = {
                halign: "left",
                valign: "middle"
            },
            //result:要打印的数据
            list = getPDFData(columns, result, colStyle);

	//PDF表格的列 格式
    function pdfColumns() {
        let columns = [{
            title: "原始行号",//列头文字
            dataKey: "LineNum",//绑定的字段
            columnStyles: {//列的样式
                columnWidth: 20,
            },
        },
        {
            title: "业务订单号",
            dataKey: "U_OrderNo",
            columnStyles: {
                columnWidth: 25,
            },
        },
        {
            title: "工单号",
            dataKey: "InspNum",
            columnStyles: {
                columnWidth: 20,
            },
        },
       
        ];
        return columns;
    }
    /*处理要打印的数据
	*/
function getPDFData(columnList, data, colStyle) {
        if (colStyle)
            columnList.forEach(s => {//打印结果，列的样式
                colStyle[s.dataKey] = s.columnStyles;
            });
        let list = [];
        data.forEach(element => {
            let mod = {};
            columnList.forEach(col => {
                let cellData = element[col.dataKey];
                if (cellData == undefined || cellData == null)
                    cellData = '';
                mod[col.dataKey] = cellData;
            });
            list.push(mod);
        });
        return list;
    }