JsPdf add support for HTML colspan

1.4k views Asked by At

I am using JsPDF for to export a PDF. It does not support HTML table colspan or CSS. So how can I export a complete pdf with a working HTML table with the CSS.

I have already tried with following jsPlugins

<script type="text/javascript" src="myproject/js/highcharts/jspdf.js"></script>
<script type="text/javascript" src="myproject/js/highcharts/jspdf.debug.js"></script>
<script type="text/javascript" src="myproject/js/highcharts/jspdf.plugin.from_html.js"></script>

HTML

<table id="mytable">
    <tr>
        <td>headding 1</td>
        <td>headding 2</td>
        <td>headding 3</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td colspan="2" >col 2 and 3</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </tr>
</table>

Javascript

var specialElementHandlers = {
    '#bypassme': function (element, renderer) {
        return true;
    }
};

doc.fromHTML($('#mytable').get(0), xx, yy+=60, {
    'width': 540,
    'elementHandlers': specialElementHandlers
});

PDF output enter image description here

1

There are 1 answers

2
Sumodh S On

In jsPDF directly adding CSS to pdf is not supported. But you can add limited styles using methods. If you are using php you can try mpdf. It supports adding css directly for java back end try iText and in .net you can try iTextSharp

http://mrrio.github.io/jsPDF/doc/symbols/jsPDF.html

http://www.itextpdf.com/