Generating PDF with jsPDF

Question

I'm trying to print a table from my webpage as pdf with jsPDF. I create the table in a new window, and what I was doing before find jsPDF was printing the whole new page with the mapped table, but now I need to download the pdf without show the printing wizard, so I tried the jsPDF scripts for my purpose, but I'm not being able to print the correct format of my table. I have to say I'm using another js called JsBarcode because I need to generate a barcode in my table and print it in the PDF, and for now I'm not being able to print it correctly.

Here is my JavaScript code:

JsBarcode(".barcode").init(); 
var doc = new jsPDF(); 
var specialElementHandlers = {
    "#bypassme": function (element, renderer) {
        return true
    }
}; 
var margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
}; 
var source = $("#content")[0];
doc.fromHTML(
    source.innerHTML,
    margins.left, 
    margins.top, 
    {
        "width": margins.width,
        "elementHandlers": specialElementHandlers
    }, 
    function (dispose) { 
        doc.save("Test.pdf"); 
    }, 
    margins
); 

Here is the HTML:

<div id="content">
<table border="2px" class="table" style="border: 2px dashed #000; border-collapse: collapse;" >
    <tr>
        <td style="border: 0px;">
            <table class="table" style="font-size:13px;">
                <tr style="background-color:#bdbdbd;">
                    <td>VALUE_0</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.1</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.2</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.3</td>
                </tr>
                <tr>
                    <td style="border: 0px;">VALUE_0.4</td>
                </tr>
            </table>
        </td>
        <td style="border: 0px;">
            <table class="table" border="2px" solid>
                <tr style="background-color:#bdbdbd;">
                    <td><b>VALUE_1</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.1</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.2</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.3</b></td>
                </tr>
                <tr>
                    <td style="border: 0px;"><b>VALUE_1.4</b></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="border: 0px;">
            <p><b>VALUE_2</b></p>
            <p><b>VALUE_3</b></p>
            <p><b>VALUE_4</b></p>
            <p><b>VALUE_5</b></p>
        </td>
        <td style="text-align:center; border:0px;">
            <svg class="barcode" jsbarcode-format="code128" jsbarcode-value="VALUE_6" jsbarcode-textmargin="0" jsbarcode-margin="0" jsbarcode-height="50" jsbarcode-fontSize="18" jsbarcode-fontoptions="italic"></svg>
        </td>
    </tr>
</table>
</div>

I've added jquery, jsbarcode and jspdf libraries. This is that I get when I print the whole page (calling the window.print() event with the console and saving it as pdf)

And this is what I have when I send to console the script doc.save("test.pdf");

NOTE: I script the doc.save("test.pdf") on the console because I'm being unable to execute the "function(dispose)" code

Thanks for the help!

UPDATE: I'm trying the same code without the part of function(dispose), just like this

document.onload = setTimeout(function () {
    JsBarcode(".barcode").init(); 
    var doc = new jsPDF(); 
    var specialElementHandlers = {
        "#bypassme": function (element, renderer) {
            return true
        }
    }; 
    var margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    }; 
    var source = $("#content")[0];
    doc.fromHTML(
        source.innerHTML,
        margins.left, 
        margins.top, 
        {
            "width": margins.width,
            "elementHandlers": specialElementHandlers
        }
    );

    doc.save("Test.pdf"); 
}, 500);

And now I'm getting the pdf without code anything on the console, but the table is not mapped and the barcode is not showing...

Answer 1

Since you already have jQuery, try using document.ready .

JsBarcode(".barcode").init(); 

$( document ).ready(function() {
var doc = new jsPDF(); 
var specialElementHandlers = {
    "#bypassme": function (element, renderer) {
        return true
    }
}; 
var margins = {
    top: 80,
    bottom: 60,
    left: 40,
    width: 522
}; 
var source = $("#content")[0];
doc.fromHTML(
    source.innerHTML,
    margins.left, 
    margins.top, 
    {
        "width": margins.width,
        "elementHandlers": specialElementHandlers
    }, 
    function (dispose) { 
        doc.save("Test.pdf"); 
    }, 
    margins
); 
});