如何在jspdf-autotable中居中一个div。我正在尝试以下代码,但得到的结果如下面的截图和此jsfiddle中的详细信息
// Header content function
let header = function(data) {
doc.setFontSize(18);
doc.setTextColor(40);
doc.setFontStyle('normal');
headerHtml = '<div style="text-align: center;">' +
'<h2>Main Header</h2> ' +
'<h3>Second Header</h3>' +
'<h4>Third Header</h4>' +
'</div>';
doc.fromHTML(
headerHtml,
50, //x coord
10, //y coord
{
useCss: true,
margin: {left:0, right: 0},
align: "center"
}
);
};
// Auto table content options
let autoTableOptions = {
html: table,
startY: 100, //false
//margin: {top: 30},
theme: 'plain', //striped, plain, grid
cellWidth: 'auto',
useCss: true,
margin: {bottom:20},
showHead: 'everyPage', //false, 'everyPage', 'firstPage'
styles: {
fontSize: 10.5, //14px
font: 'helvetica', //helvetica, times, courier
lineColor: [0, 0, 0], //or single value ie. lineColor: 255,
lineWidth: .75, //1px
cellPadding: 1.5,
textColor: [0, 0, 0],
fillColor: [255, 255, 255], //false for transparent or number or array of number
valign: 'middle', //top, middle, bottom
halign: 'left', //left, center, right
cellWidth: 'auto', //'auto', 'wrap' or a number
overflow: 'visible', //visible, hidden, ellipsize or linebreak
fontStyle: 'normal', //normal, bold, italic, bolditalic
rowPageBreak: 'always', //always, auto, avoid
useCss: true,
},
didDrawPage: function (data) {
// Header Content
//let pageNumber = doc.internal.getNumberOfPages();
if(data.pageNumber === 1) {
header(data);
}
},
};
doc.autoTable(autoTableOptions);
截图:
谁能帮我?
对于任何不清楚的问题,我很抱歉请告诉我。提前致谢
要获得预期的结果,请使用以下选项查找页面宽度并将其用于x坐标
let pdfWidth = doc.internal.pageSize.getWidth();
使用该页面宽度的一半作为标题的x坐标
doc.fromHTML(
headerHtml,
pdfWidth/2, //x coord
10, //y coord
{
useCss: true,
margin: {left:0, right: 0},
halign: "center"
}
);
codepen - https://codepen.io/nagasai/pen/rbvdeE