DataTables pdfHtml5导出PDF时动态调整页眉页脚元素位置的实现问题

实现逻辑 #

pdfHtml5 底层依赖 pdfmake 库，页眉/页脚的 columns 数组默认包含3个元素，顺序依次对应居左、居中、居右三个位置，我们只需要把各个自定义元素按数据库配置填入对应的数组下标即可。
这里默认你数据库存储的位置值为 top-left（顶部居左）、top-center（顶部居中）、top-right（顶部居右）、bottom-left（底部居左）、bottom-center（底部居中）、bottom-right（底部居右）格式，如果存储的是其他编码值，调整对应位置映射逻辑即可。

修改后完整代码 #

// 先获取数据库的配置值
var logo_position = obj[0].value; // 示例配置值：top-center
var date_position = obj[1].value; // 示例配置值：bottom-left
var rec_no_position = obj[2].value; // 示例配置值：bottom-center
var page_status = obj[3].value; // 示例配置值：bottom-right

$.extend(true, $.fn.dataTable.defaults, {
    buttons: [
        {
            text:'导出PDF',
            className: "btn btn-primary",
            extend: 'pdfHtml5',
            download: 'open',
            title: '记录列表',
            exportOptions: {
                columns: ':not(:last-child)'
            },
            customize: function ( doc ) {
                var now = new Date();
                var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();

                // 构建页眉三列：下标0=居左，1=居中，2=居右，默认空内容
                const headerCols = ['', '', ''];
                // 匹配logo位置
                const [logoArea, logoAlign] = logo_position.split('-');
                const logoColIndex = logoAlign === 'left' ? 0 : logoAlign === 'center' ? 1 : 2;
                if(logoArea === 'top') {
                    headerCols[logoColIndex] = { image: logo, width: 24 };
                }

                doc['header']=(function() {
                    return {
                        columns: headerCols,
                        margin: 20
                    }
                });

                doc['footer']=(function(page, pages) {
                    // 构建页脚三列：下标0=居左，1=居中，2=居右，默认空内容
                    const footerCols = ['', '', ''];
                    
                    // 匹配打印日期位置
                    const [dateArea, dateAlign] = date_position.split('-');
                    const dateColIndex = dateAlign === 'left' ? 0 : dateAlign === 'center' ? 1 : 2;
                    if(dateArea === 'bottom') {
                        footerCols[dateColIndex] = { text: ['打印时间：', { text: jsDate.toString() }] };
                    }

                    // 匹配记录编号位置
                    const [recArea, recAlign] = rec_no_position.split('-');
                    const recColIndex = recAlign === 'left' ? 0 : recAlign === 'center' ? 1 : 2;
                    if(recArea === 'bottom') {
                        footerCols[recColIndex] = { text: [{ text: $("#page_no").text() }] };
                    }

                    // 匹配页码位置
                    const [pageArea, pageAlign] = page_status.split('-');
                    const pageColIndex = pageAlign === 'left' ? 0 : pageAlign === 'center' ? 1 : 2;
                    if(pageArea === 'bottom') {
                        footerCols[pageColIndex] = { text: ['第 ', { text: page.toString() },  ' 页，共 ', { text: pages.toString() }, ' 页'] };
                    }

                    return {
                        columns: footerCols,
                        margin: 20
                    }
                });
            }
        }
    ]
});

补充说明：如果需要调整单个元素的对齐样式，可以给对应列元素增加 alignment: 'center' 这类属性配置，适配特殊排版需求。

内容的提问来源于stack exchange，提问作者Hello