How to export html table and add other content using jspdf.debug.js[Answered] RSS

1 reply

Last post Oct 28, 2016 07:57 AM by Cathy Zou

‹ Previous Thread|Next Thread ›

Shortcuts

Christian123...

Member

15 Points

46 Posts

How to export html table and add other content using jspdf.debug.js

Oct 27, 2016 07:53 AM|Christian1234|LINK

Hi everyone! I'm using jspdf.debug.js to export html table to pdf. I want to know how to add html content before and after the table. I've tried to do it but don't know how to align the html content just before or after the html table. Here's my code:

<script src="<%: Url.Content("~/Content/jspdf.debug.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Content/jspdf.min.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Content/from_html.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Content/config.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Content/test_harness.js")%>" type="text/javascript"></script>

<script>    
    function exporterverspdf() {
            var pdf = new jsPDF('l', 'pt', 'a3');

            pdf.cellInitialize();
            pdf.setFontSize(10);
            var a = 0;
            $.each($('#table1 tr'), function (i, row) {
                if ($(row).text().trim().length !== 0) {
                    $.each($(row).find("td, th"), function (j, cell) {
                        var txt = $(cell).text().trim() || " ";
                        var width = (j == 0) ? 150 : 150; //make with column smaller
                        //if (j == 1) {
                        //    width = 230;
                        //}
                        console.log($(row).text().trim());
                        if (j >= 0) {
                            pdf.cell(10, 50, width, 18, txt, i);
                        }
                    });              
                }
                a++;
            });
            var b = a * 45;
            var ta = document.getElementById('textarea1');//Here I try to add other element but I need to specify the position therefore if the table change this content is not aligned correctly

            pdf.fromHTML(ta.value, 0, b);// Here I align the content depending on the value of b and I think it's not the best solution

            ta.onkeyup = function () {
                pdf.fromHTML(ta.value, 0, b);
                harness.setPdf(pdf);
            }

            var harness = pdf_test_harness_init(pdf);
            harness.header.style.left = '50%';
            harness.body.style.left = '50%';
            pdf.save('sample-file.pdf');
        }
    <script/>

Thanks for your help!

</div>

Cathy Zou

Star

8670 Points

2882 Posts

Re: How to export html table and add other content using jspdf.debug.js

Oct 28, 2016 07:57 AM|Cathy Zou|LINK

Hi Christian1234,

Christian1234
how to align the html content just before or after the html table. Here's my code:

For you question above, I suggest you could try to change x coord and y coord parameters in pdf.fromHTML() to align the html content.

https://github.com/willowsystems/jsPDF/commit/12f29d7c31013c2cf64e527ca5f1a960cdaf4fb3

Besides, the following example is for your reference:

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>

<div id="customers">
    <table id="tab_customers" class="table table-striped">
        <colgroup>
            <col width="20%">
                <col width="20%">
                    <col width="20%">
                        <col width="20%">
        </colgroup>
        <thead>
            <tr class='warning'>
                <th>Country</th>
                <th>Population</th>
                <th>Date</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chinna</td>
                <td>1,363,480,000</td>
                <td>March 24, 2014</td>
                <td>19.1</td>
            </tr>
            <tr>
                <td>India</td>
                <td>1,241,900,000</td>
                <td>March 24, 2014</td>
                <td>17.4</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>317,746,000</td>
                <td>March 24, 2014</td>
                <td>4.44</td>
            </tr>
            <tr>
                <td>Indonesia</td>
                <td>249,866,000</td>
                <td>July 1, 2013</td>
                <td>3.49</td>
            </tr>
            <tr>
                <td>Brazil</td>
                <td>201,032,714</td>
                <td>July 1, 2013</td>
                <td>2.81</td>
            </tr>
        </tbody>
    </table>
    <input id="Text1" type="text" value="JSPDF is an open-source library for generating ."/>
</div>
<button onclick="javascript:demoFromHTML();">PDF</button>

 <script>
        function demoFromHTML() {
            var pdf = new jsPDF('p', 'pt', 'letter');
            var text = document.getElementById("Text1").value;
            pdf.text(100, 225, text);
            // source can be HTML-formatted string, or a reference
            // to an actual DOM element from which the text will be scraped.
            source = $('#customers')[0];

            // we support special element handlers. Register them with jQuery-style 
            // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
            // There is no support for any other type of selectors 
            // (class, of compound) at this time.
            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
            };
            // all coords and widths are in jsPDF instance's declared units
            // 'inches' in this case
            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) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins);
        }
    </script>

http://jsfiddle.net/xzZ7n/5298/

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›