3

I have created an appliction for downloading a html table to pdf using javascript i used jsPDF plugin. The application is working fine but the problem is that the table is not proper. The width of the table as well as the header is not properly alligned. I am using angularjs for creating the table.

Can anyone please give me some suggestion for this problem

JSFiddle

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#customers')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 4,
        bottom: 4,
        left: 4,
        width: 522
    };
    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);
}
Alex Man
  • 4,746
  • 17
  • 93
  • 178

2 Answers2

4

I guess you currently have to do that manually (fiddle):

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');

    pdf.cellInitialize();
    pdf.setFontSize(10);
    $.each( $('#customers tr'), function (i, row){
        $.each( $(row).find("td, th"), function(j, cell){
            var txt = $(cell).text().trim() || " ";
            var width = (j==4) ? 40 : 70; //make 4th column smaller
            pdf.cell(10, 50, width, 30, txt, i);
        });
    });

    pdf.save('sample-file.pdf');
}
mb21
  • 34,845
  • 8
  • 116
  • 142
  • but why provider is seen out of the table – Alex Man Sep 29 '14 at 13:23
  • because "Customer Plan Provider" is longer than `70pt`. Here's a version that splits the words by spaces and puts newlines in instead: http://jsfiddle.net/00cvyyuo/2/ – mb21 Sep 29 '14 at 13:32
  • one more issue is that how to remove that empty row – Alex Man Sep 29 '14 at 13:33
  • the empty row is already in the HTML, you should remove it there. – mb21 Sep 29 '14 at 13:34
  • since its been generated by angularjs thrid party plugin, i cant remove it.......can we do it from the javascript – Alex Man Sep 29 '14 at 13:35
  • It's probably best to reconfigure that plugin as it's also wrong to have the empty row in the HTML. – mb21 Sep 29 '14 at 13:59
  • can we check while iterating whether all the columns within that row is empty or not – Alex Man Sep 29 '14 at 14:16
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62118/discussion-between-alex-man-and-mb21). – Alex Man Sep 29 '14 at 14:19
  • can we color and bold the header part – Alex Man Sep 29 '14 at 14:20
  • do you know how to add shim for IE9 [SO Question](http://stackoverflow.com/questions/26103091/ie9-error-in-function-arraybuffer-is-undefined-referenceerror-arraybuffe?noredirect=1#comment40906866_26103091) – Alex Man Sep 29 '14 at 15:28
0

try "jspdf" instead of "jsPDF"

Rira Dev
  • 1