Создайте pdf с помощью jsPDF с отформатированными данными таблицы

Я могу сгенерировать файл PDF из таблицы html, используя приведенный ниже скрипт: Но я получаю данные всех столбцов построчно.

Пожалуйста, помогите мне сгенерировать файл PDF в виде таблицы (с границей столбца, полем или отступом, заголовками) в этом скрипте

Я использую скрипт jsPDF lib для создания таблицы html в PDF.

 var pdf = new jsPDF('p', 'pt', 'letter')   
    , source = $('#TableId')[0] 
    , specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function(element, renderer){           
            return true
        }
    }

    , margins = {
             top: 20,
             bottom: 20,
             left: 30,
             width: 922
         };


    pdf.fromHTML(
        source // HTML string or DOM elem ref.
        , margins.left // x coord
        , margins.top // y coord
        , {
            'width': margins.width // max width of content on PDF
            , 'elementHandlers': specialElementHandlers
        },
        function (dispose) {          
          pdf.save('Test.pdf');
        },
        margins
    )

ИЗМЕНИТЬ:

Я также пробовал эту пример функцию ниже, но я получаю просто пустой файл PDF.

function exportTabletoPdf()
{
    var doc = new jsPDF('p','pt', 'a4', true);
    var header = [1,2,3,4];
    doc.table(10, 10, $('#test').get(0), header, {
    left:10,
    top:10,
    bottom: 10,
    width: 170,
    autoSize:false,
    printHeaders: true
    });
    doc.save('sample-file.pdf');
}

html jquery jspdf html-table export-to-pdf
person user3428816    schedule 11.04.2014    source источник
comment
Мой другой пост может вам помочь: введите здесь описание ссылки < /а>   -  person Leonardo Venoso    schedule 02.05.2017

Ответы (4)


arrow_upward
2
arrow_downward

Вы должны использовать что-то вроде -- doc.setLineWidth(2);

для границы строки. Пожалуйста, посмотрите следующий пример кода

Как установить ширину столбца для создания PDF с помощью jsPDF

person Vinu    schedule 30.04.2014

arrow_upward
45
arrow_downward

Я потратил много времени на поиски хорошего представления своих таблиц, затем нашел этот плагин (https://github.com/simonbengtsson/jsPDF-AutoTable), отлично работает, включает темы, rowspan, colspan, извлекает данные из html, работает с json, также можно персонализировать заголовки и сделать их горизонтальными. Изображение ниже является примером: jsPDF-AutoTable

person Oscar Acevedo    schedule 26.10.2015
comment
Это очень мило! Спасибо за ваш вклад! - person Cameron Tinker; 08.08.2019
comment
Большое спасибо! Теперь он работает с этим плагином! - person Fernando Torres; 06.11.2019

arrow_upward
1
arrow_downward

Попробуйте удалить последний аргумент «true» из этого метода:

var doc = new jsPDF('p','pt', 'a4', true);
person Ali Mohammad Fawzi    schedule 14.03.2015
comment
в документах говорится, что логическое значение — это параметр putOnlyusedFonts, который включает только шрифты, которые использовались в PDF. - person MoralCode; 24.11.2019

arrow_upward
1
arrow_downward

Экспорт содержимого html div, включая обычный текст и табличные данные, с помощью jspdf include script https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js

function download_DIVPdf(divid) {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var pdf_name = 'PostMode-'+om+'.pdf';
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    htmlsource = $('#'+divid)[0];

    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };

    pdf.fromHTML(
    htmlsource, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {                

        pdf.save(pdf_name);
    }, margins);
}
person Lokesh Das    schedule 02.05.2017
comment
Пожалуйста, не забудьте включить скрипт cdnjs.cloudflare. com/ajax/libs/jspdf/1.3.2/jspdf.min.js - person Lokesh Das; 02.05.2017