I am trying to convert html that has tabulator table in body but it is show the following error:
Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor
and the wkhtmltopdf does not move ahead.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
</script>
</head>
<body>
<div id="table"></div>
<script>
var tabledata = [
{ id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
{ id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
{ id: 3, name: "Christine Lobowski", age: "42", col: "green", dob: "22/05/1982" },
{ id: 4, name: "Brendon Philips", age: "125", col: "orange", dob: "01/08/1980" },
{ id: 5, name: "Margret Marmajuke", age: "16", col: "yellow", dob: "31/01/1999" },
];
new Tabulator("#table", {
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{ title: "Name", field: "name", width: 150 },
{ title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
{ title: "Favourite Color", field: "col" },
{ title: "Date Of Birth", field: "dob", sorter: "date", hozAlign: "center" },
],
});
window.status = 'print';
</script>
</body>
</html>
works fine in browser but wkhtmltopdf stops at:
command: wkhtmltopdf --debug-javascript --window-status print --enable-local-file-access tabtest.html table.pdf
Is there a reason you are trying to generate a PDF of a table that way? your import tool will probably struggle because Tabulator does not produce a pure HTML table.
There are several features that come built in to Tabulator that may provide a better way for you to get what you want:
Tabulator does come with a built in PDF Downloader that lets you download the table as a pdf with one simple command
table.download("pdf", "table.pdf");
Full details of this can be found in the PDF Download Documentation
Because Tabulator uses a virtual DOM only the visible rows of the table actually exist, the rest are created and destroyed as you scroll, so printing a table will only get you the visible rows.
If you want to print the whole table then you should have a look at the Print Documentation that will take you through how to enable print styling an show the whole table:
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printStyled:true, //copy Tabulator styling to HTML table
});
If you would simply like an HTML equivalent of the table the the getHTML function will return a simple HTML equivalent of the table that you can use in any way you like:
var htmlTable = table.getHtml();
Full details on this option can be found in the HTML Table Export Documentation