Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create pdf using jsPDF with formatted Table data

I am able to generated PDF file from html table using this below script: But I am getting all the columns data are line by line.

Please help me to generate PDF file as a tabular formatted way.(with column border, margin or padding, headers ) in this script

I am used jsPDF lib script to generate a html table to 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
    )

EDIT:

I have tried this sample below function too, but I am getting just empty pdf file.

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');
}
like image 605
user3428816 Avatar asked Apr 11 '14 16:04

user3428816


People also ask

What is jsPDF Autotable?

The jsPDF AutoTables plugin is for converting a table to a PDF. This is a dependable client-side library to generate reports online in a table format.

What is jsPDF used for?

jsPDF is an open-source library for generating PDF documents using JavaScript. It provides multiple options to generate PDF files, with custom properties. It has numerous plugins to support various ways of PDF generation.


1 Answers

I spent a lot of time looking for a good representation of my tables, then I found this plugin (https://github.com/simonbengtsson/jsPDF-AutoTable), It works great, includes themes, rowspan, colspan, extract data from html, works with json, you can also personalize your headers and make them horizontals. The image below is an example: jsPDF-AutoTable

like image 113
Oscar Acevedo Avatar answered Sep 19 '22 14:09

Oscar Acevedo