pdfmake中未占满全宽的表格如何实现水平居中对齐?
pdfmake表格水平居中解决方案
你当前代码中tableCenter样式的absolutePosition.x = 10配置强制锁定了元素左侧距离页面边缘的位置,导致表格无法自动水平居中,移除该配置后调整样式即可实现两侧留白相等的效果。
效果示意图:
调整后可用代码如下:
generatePdf(template: ElementRef): any { const pdfTable = template.nativeElement; const html: Array<any> = htmlToPdfmake(pdfTable.innerHTML); html.forEach((item) => { // 仅给表格元素应用居中样式,避免影响其他已居中的合计文本 if (item.table) { item.style = ['tableCenter']; // 可选配置:如果需要控制表格最大宽度,可手动指定宽度占比 // item.width = '90%' } }); const documentDefinition = { content: html, pageSize: 'A3', pageOrientation: 'landscape', styles: { tableCenter: { alignment: 'center' // 移除强制固定位置的absolutePosition配置 }, }, }; return pdfMake.createPdf(documentDefinition); }
如果调整后表格仍未居中,可以检查HTML模板内的表格是否设置了width: 100%的样式,将其改为自适应内容宽度,或者在上述代码中给table节点指定固定宽度/百分比宽度即可让居中配置生效。
内容的提问来源于stack exchange,提问作者Luis Fernando Prudencio Cruz
相关产品推荐
相关产品推荐

