jsPDF自动右对齐x位置错误

Posted

技术标签:

【中文标题】jsPDF自动右对齐x位置错误【英文标题】:jsPDF autotable right align x position bug 【发布时间】:2017-06-15 11:48:03 【问题描述】:

我的例子(只需点击“导出 PDF”):https://jsfiddle.net/j9vaqpnz/7/

我的示例导出我的表格,如下所示:

.

然后使用库jspdf 和autotable 将表格导出为pdf。

在导出功能期间,我使用“drawCell”功能,对于所有包含数字的列,我将它们右对齐,如下所示:

drawCell: function (cell, data) 
                var col = data.column.index;
                if(col==3 || col==5 || col==6 || col==7 || col==8 || col==9 || col==10)
                    cell.styles.halign = 'right';
                
            

.

问题:在 PDF 中,我右对齐的所有列都定位不正确,如下所示:

这是一个错误吗?或者我可能不正确地使用“drawCell”?

【问题讨论】:

尝试使用 createdCell 代替 drawCell。 塔克西蒙。如果其他人正在寻找这个,我已经在下面发布了一个更新的工作示例以完成。 【参考方案1】:

当使用“didParseCell”(v3.x)时,右对齐可以正确定位元素。

更新示例:https://jsfiddle.net/j9vaqpnz/10/

新代码:

...
didParseCell: function (cell, data) 
    alignCol(cell, data);

...

function alignCol(data)
    var col = data.column.index;
    if(col==3 || col==5 || col==6 || col==7 || col==8 || col==9 || col==10)
        data.cell.styles.halign = 'right';
    

【讨论】:

jsfiddle 正在使用 createdHeaderCellcreatedCell,这有效【参考方案2】:

您可以使用columnStyles 属性对齐单元格

const pdf = new jsPDF();

pdf.autoTable(

    ...

    columnStyles: 
        3: 
            halign: 'right'
        ,
        5: 
            halign: 'right'
        ,
        6: 
            halign: 'right'
        ,
        7: 
            halign: 'right'
        ,
        8: 
            halign: 'right'
        ,
        9: 
            halign: 'right'
        ,
        10: 
            halign: 'right'
        
    
);

jsPDF-AutoTable documentation

【讨论】:

以上是关于jsPDF自动右对齐x位置错误的主要内容,如果未能解决你的问题,请参考以下文章

如何自动调整大小和WPF右对齐GridViewColumn数据

c语言中怎么一次性对齐代码

R+Shiny+DT:自动右对齐数字列

JTable中的换行,右对齐,自动调整行高

如何在 WPF 中自动调整和右对齐 GridViewColumn 数据?

c语言怎么让文字右对齐