我正在尝试制作一个包含2个标头的表。目前我制作了2个单独的表,有2个单独的标题,看起来没问题,但是当表格宽度扩大时,第一个表格标题不会扩展。我如何合并2个标题,或者我可以制作1个表与2个表头。请看图片(目前桌面如何与2个桌面阅读器)
这是我的代码:
function createPDF(){
/** START PDF INSTANCE */
//var doc = new jsPDF('p', 'pt');
var doc = new jsPDF('l', 'pt');
var row = 80;
addPdfHeader(doc, row, vm.translate("REPORT.LEGALFORMS ")+" "+vm.activeCompanyYear);
doc.setFillColor(33, 150, 243);
var columns = [ " ",vm.activeCompanyYear,vm.activeCompanyYear-1,vm.activeCompanyYear-2];
var rows = [];
var description = "";
for(var j=0; j<vm.reportData.length; j++){
var obj = vm.reportData[j];
description = obj.descriptionEng;
if(description == "total"){
description = vm.translate("REPORT.REGISTRY.TOTAL");
}
var singleRow = [description,
obj.year3Total,
obj.year3Local,
obj.year3International,
obj.year2Total,
obj.year2Local,
obj.year2International,
obj.year1Total,
obj.year1Local,
obj.year1International
]
rows.push(singleRow);
}
doc.autoTable(columns, [], {
theme : 'grid',
styles: {
halign: 'right'
},
headerStyles: {
fillColor: [33, 150, 243],
halign:'center',
lineWidth: 1,
lineColor: [221, 221, 221]
},
columnStyles:{
0: {columnWidth: 266}
},
margin : {
top : 100
}
});
var columns2 = [ vm.translate("MENU.SETTINGS.LEGALFORM"),
vm.translate("REPORT.REGISTRY.TOTAL"),
vm.translate("REPORT.REGISTRY.LOCAL"),
vm.translate("REPORT.REGISTRY.INTERNATIONAL"),
vm.translate("REPORT.REGISTRY.TOTAL"),
vm.translate("REPORT.REGISTRY.LOCAL"),
vm.translate("REPORT.REGISTRY.INTERNATIONAL"),
vm.translate("REPORT.REGISTRY.TOTAL"),
vm.translate("REPORT.REGISTRY.LOCAL"),
vm.translate("REPORT.REGISTRY.INTERNATIONAL")
];
doc.autoTable(columns2, rows, {
theme : 'grid',
styles: {
halign: 'right'
},
headerStyles: {
halign:'center',
lineWidth: 1,
lineColor: [221, 221, 221]
},
margin : {
top : 120
},
columnStyles:{
0: {halign:'left'}
},
createdCell: function(cell, data) {
if(data.row.raw[0] === vm.translate("REPORT.REGISTRY.TOTAL")) {
cell.styles.fontStyle = 'bold';
cell.styles.fillColor = [255,251,204];
}
}
});
doc.save();
};
答案 0 :(得分:2)
使用v3(当前为Alpha版)时,可以这样做:
let head = [
[
{content: 'People', colSpan: 3, styles: {halign: 'center', fillColor: [22, 160, 133]}},
{content: 'Data', colSpan: 2, styles: {halign: 'center', fillColor: [22, 160, 133]}}
],
['ID', 'Name', 'Email', 'City', 'Sum'],
];
doc.autoTable({
startY: 60,
head: head,
body: body,
theme: 'grid'
});