Make div content in table before downloading pdf

Question

Here i am trying to make pdf, when user click button i need to take all div content into a table(no need images) and download as a PDF. click here for my example . in the example am using table. actually i want to make table in pdf.

JS

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

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

can you post your markup?and where do you want the div to be placed? — jameshwart lopez, Jul 15 '15 at 06:24
i just want to create table in pdf and insert the table content in to that PDF. please run the example and see the pdf document text alignments. — MATH.h, Jul 15 '15 at 06:38
**[This Answer](http://stackoverflow.com/a/24825130/2065039)** might be helpfull — Guruprasad J Rao, Jul 15 '15 at 06:45
@MATH.h Just put [this](http://jsfiddle.net/cacv56n0/) fiddle up. Check it out. — Patel, Jul 15 '15 at 06:56
@Patel yes its working fine, but How could i enter heading for this pdf — MATH.h, Jul 15 '15 at 08:39
@patel i tried your code it's working fine, but in PDF i am not getting correct table format — MATH.h, Jul 16 '15 at 10:49
@patel see this qustion http://stackoverflow.com/questions/31469939/html-tabel-rendering-to-pdf-content-in-pdf-not-tabel-format — MATH.h, Jul 17 '15 at 07:19
This does not use JSpdf, it uses a different library (http://www.cloudformatter.com/css2pdf) but i believe this is what you are looking for: http://jsfiddle.net/wL8r6n05/2/ — Kevin Brown, Jul 19 '15 at 23:22
@KevinBrown it work's awesome but by table is hidden in that page so that time am not getting any content see this http://jsfiddle.net/wL8r6n05/4/ — MATH.h, Jul 20 '15 at 05:13
That is because the formatter respects the display style attribute ... none is well none. You would need to do it in CSS with a class to override. Like this: http://jsfiddle.net/wL8r6n05/5/ — Kevin Brown, Jul 21 '15 at 01:56
@MATH.h was exploring your fiddle to see how well jsPdf was working but was not impressed with the result. I forked your fiddle to try the xepOnline / Cloudformatter script suggestion below and the answer and formatting is perfect. See this answer: http://jsfiddle.net/cacv56n0/2/ — kstubs, Jul 21 '15 at 04:35

Kevin Brown · Accepted Answer · 2015-07-21T02:29:14.433

http://www.cloudformatter.com/css2pdf supports many CSS styles and structures including tables. As stated in the comments above, it is not jsPDF but is it's own rendering solution. Your document in this fiddle (http://jsfiddle.net/wL8r6n05/2/) shows this as it formats as a table and not something else. Simply use this:

$('#cmd').click(function () {
    return xepOnline.Formatter.Format('printme',{render:'download'});
});

As per your second comment, you can hide the data also in the HTML and only expose it through @media print commands. This is shown in this second fiddle (http://jsfiddle.net/wL8r6n05/5/) where the div surrounding the table is exposed only for @media print styling:

.hidden {
    display:none;
}
@media print {
    .hidden {
        display:block;
    }
}

It supports applying @media print CSS styling to content prior to sending to the formatter.

score 0 · Answer 2 · answered Jul 15 '15 at 06:31

0

The example works just change <table class="table" id="tablepdf"> with <table class="table" id="content"> and you are done.

JSFiddle updated

If your needs are different please explain.

answered Jul 15 '15 at 06:31

michelem

14,430
5
50
66

i just want to create table in pdf and insert the table content in PDF. please run the code and see the pdf document text alignments – MATH.h Jul 15 '15 at 06:33

Make div content in table before downloading pdf

2 Answers2