HTML в PDF (с помощью javascript), как я могу добавить CSS или таблицу?

В проекте я преобразовал html-файл в pdf, после чего он работает нормально. Но этот вывод не показывает дизайн css. Теперь мне нужно предложение, как я могу добавить дизайн css с этим pdf-файлом?

Здесь код функции 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;
}

Это заставляет меня плакать после просмотра этого вывода !!

введите здесь описание изображения

Любой способ избежать этого перекрытия? Какое лучшее решение для добавления css в pdf?


javascript pdf html css jspdf
person Alimon Karim    schedule 22.01.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Хорошо, после многих попыток я решил это. Отдельное спасибо за 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);  
                }
            })
        })

После решения здесь вывод введите здесь описание изображения

person Alimon Karim    schedule 23.01.2014
comment
Я делаю то же самое, но мои строки talbe смещаются на единицу. Не знаю, почему. У вас была такая же проблема? Под этим я подразумеваю, что моя первая строка пуста, а последняя строка не имеет границ... - person gco; 23.05.2014

arrow_upward
0
arrow_downward

Хм! Я думаю, что этот пост может дать вам все, что вам нужно, с mPDF: как добавить css файл в формате mpdf

С jsPDF я знаю только трудный путь: http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html (см. сводку методов).

Надеюсь, поможет!

person mihaidp    schedule 22.01.2014