HTML 到 PDF（通过 javascript）如何添加 css 或表格？答案

【问题标题】：HTML to PDF (by javascript) how can I add css or table?HTML 到 PDF（通过 javascript）如何添加 css 或表格？
【发布时间】：2014-02-12 08:11:28
【问题描述】：

在一个项目中，我已经将 html 文件转换为 pdf，但它工作正常。但是这个输出没有显示 css 设计。现在我需要一个建议，如何使用这个 pdf 文件添加 css 设计？

这里是js函数代码：

 $(function(){
         var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#StudentInfoListTable').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

我从这个项目中得到了帮助 https://github.com/MrRio/jsPDF

这是我的桌子

这是pdf输出

我已尝试添加表格

$('#cmd').click(function () {

        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', pt, 'a1', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
            console.debug(row);
            $.each(row, function (j, cell){
                doc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
            })
        })


        doc.save('sample-file.pdf');
    });

这里是函数

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }


    // go through cells
    for (var i=0; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

看到这个输出我哭了！！

有什么方法可以避免这种重叠？在pdf中添加css的最佳解决方案是什么？

【问题讨论】：

标签： javascript html css pdf jspdf

【解决方案1】：

好的，经过多次尝试我已经解决了。特别感谢mihaidp，这是我解决表格行问题的代码

$('#cmd').click(function () {
        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p', 'pt', 'a4', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
                doc.setFontSize(10);

                $.each(row, function (j, cell){
                if(j=='name')
                {
                    doc.cell(10, 50,100, 30, cell, i);
                }
                else if(j=='email')
                {
                    doc.cell(10, 50,130, 30, cell, i);
                }
                else if(j=='track')
                {
                    doc.cell(10, 50,40, 30, cell, i);
                }
                else if(j=='s.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else if(j=='h.s.croll')
                {
                    doc.cell(10, 50,51, 30, cell, i);
                }
                else 
                {
                    doc.cell(10, 50,70, 30, cell, i);  
                }
            })
        })

在这里解决后的输出

【讨论】：

我也在做同样的事情，但是我的 talbe 行偏移了一个。不知道为什么。你有同样的问题吗？我的意思是我的第一行是空的，最后一行没有任何边框......

【解决方案2】：

嗯！我认为这篇文章可以为您提供所需的一切，使用 mPDF：how to add css file in mpdf

使用 jsPDF 我只知道困难的方法：http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html（参见方法摘要）。

希望对您有所帮助！

【讨论】：