Question

如何在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);

屏幕截图：

有人可以帮助我吗？

对于任何不清楚的问题，我们深表歉意。预先感谢

Answer 1

要获得预期结果，请使用下面的选项来找到页面宽度并将其用于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

如何在jspdf-autotable中将div居中

1 个答案: