Design in table in pdf with jspdf?

Question

I want to copy exactly this table to PDF with jspdf.

But jspdf prints me this:

Here's my code:

<style> table#disenio{ border: 1px solid black; width: 400px; background: #CCC; color: #A41E15; } table#disenio td, table#disenio th{ border: 1px solid black; width: 400px; background: #CCC; color: #A41E15; }

<table id="disenio"> <thead> <tr> <th>HolaU</th> <th>HolaU</th> <th>HolaU</th> <th>HolaU</th> </tr> </thead> <tbody> <tr> <td>Hola</td> <td>Hola</td> <td>Hola</td> <td>Hola</td> </tr> <tr> <td>Hola</td> <td>Hola</td> <td>Hola</td> <td>Hola</td> </tr> </tbody>

<a href="javascript:demoFromHTML()" class="button">Run Code</a>

Js's:

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../js/jspdf.js"></script> <script type="text/javascript" src="../js/jspdf.plugin.standard_fonts_metrics.js"></script> <script type="text/javascript" src="../js/jspdf.plugin.split_text_to_size.js"></script> <script type="text/javascript" src="../js/jspdf.plugin.from_html.js"></script>

Js Code:

<script> function demoFromHTML() { var doc = new jsPDF(); doc.fromHTML( $('#disenio').get(0), 15, 15, { 'width': 170 }); doc.output('dataurlnewwindow'); }

Please, help me! What can I do?

Simon Bengtsson · Accepted Answer · 2015-04-03 19:58:59Z

The jsPDF table feature is very basic and basically first converts the html table to json and then creates a table from that. Some styling might be copied over but it is hit or miss really. If you want a styled table a better option is to use a table plugin to jsPDF and specify the styling manually.

EDIT: I made my own table plugin for jsPDF featuring auto width and a bunch of other features.

Collectives™ on Stack Overflow

Design in table in pdf with jspdf?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related