JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<div id="customers">
<table border="1" id="tab_customers" rc-table="sorting" class="rc-table-layout rc-hover rc-stripes ng-scope rc-table"><thead class="ng-scope"><tr>
<!-- ngRepeat: column in $columns --><th class="header sortable" ng-init="template = column.headerTemplateURL(this)" ng-show="column.show(this)" ng-click="sortBy(column, $event)" ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
'sort-desc': params.sorting()[parse(column.sortable)]=='desc',
'rc-toggle-cell-hidden': !rcToggled[$index].on && rcToggled[$index].forced,
'rc-toggle-cell-visible': rcToggled[$index].on && rcToggled[$index].forced,
'rc-cell-frozen': rcFrozen[$index],
'rc-cell-frozen-last': $index===(rcFreezeColumns - 1),
'rc-toggle-cell-frozen-hidden': !rcFrozen[$index] && ($index> rightVisibleColumn || $index < leftVisibleColumn)
}" ng-repeat="column in $columns">
<!-- ngIf: !template --><div ng-bind="parse(column.title)" ng-show="!template" ng-if="!template" class="ng-binding ng-scope">Customer</div><!-- end ngIf: !template -->
<!-- ngIf: template -->
</th><!-- end ngRepeat: column in $columns --><th class="header sortable" ng-init="template = column.headerTemplateURL(this)" ng-show="column.show(this)" ng-click="sortBy(column, $event)" ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
'sort-desc': params.sorting()[parse(column.sortable)]=='desc',
'rc-toggle-cell-hidden': !rcToggled[$index].on && rcToggled[$index].forced,
'rc-toggle-cell-visible': rcToggled[$index].on && rcToggled[$index].forced,
...
JavaScript
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// 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: 4,
bottom: 4,
left: 4,
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);
}