Printing Tabulator Table Using Wkhtmltopdf ( Error: Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor )
Printing Tabulator Table Using Wkhtmltopdf ( Error: Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor )
我正在尝试转换正文中包含制表符 table 的 html，但它显示以下错误：
Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor
wkhtmltopdf 没有向前推进。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.8.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.4/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>
在浏览器中工作正常，但 wkhtmltopdf 停止在：
命令：wkhtmltopdf --debug-javascript --window-status print --enable-local-file-access tabtest.html table.pdf
screenshot of the wkhtmltopdf console output
您尝试以这种方式生成 table 的 PDF 有什么原因吗？您的导入工具可能会遇到困难，因为 Tabulator 不会生成纯 HTML table.
Tabulator 内置了多项功能，可以为您提供更好的方式来获得您想要的内容：
内置 PDF 下载
Tabulator 确实带有一个内置的 PDF 下载器，让您可以使用一个简单的命令将 table 下载为 pdf
table.download("pdf", "table.pdf");
有关详细信息，请参阅 PDF Download Documentation
正在打印 table
因为 Tabulator 使用虚拟 DOM 只有 table 的可见行实际存在，其余的在滚动时创建和销毁，所以打印 table 只会得到你是可见的行。
如果您想打印整个 table，那么您应该查看 Print Documentation，它将带您了解如何启用打印样式并显示整个 table：
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printStyled:true, //copy Tabulator styling to HTML table
});
HTML 导出
如果您只是想要 table 的 HTML 等价物，则 getHTML 函数将 return 一个简单的 HTML 等价物 table，你可以用任何你喜欢的方式使用：
var htmlTable = table.getHtml();
有关此选项的完整详细信息，请参见 HTML Table Export Documentation
我正在尝试转换正文中包含制表符 table 的 html，但它显示以下错误：
Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor
wkhtmltopdf 没有向前推进。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.8.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.4/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>
在浏览器中工作正常，但 wkhtmltopdf 停止在：
命令：wkhtmltopdf --debug-javascript --window-status print --enable-local-file-access tabtest.html table.pdf
screenshot of the wkhtmltopdf console output
您尝试以这种方式生成 table 的 PDF 有什么原因吗？您的导入工具可能会遇到困难，因为 Tabulator 不会生成纯 HTML table.
Tabulator 内置了多项功能，可以为您提供更好的方式来获得您想要的内容：
内置 PDF 下载
Tabulator 确实带有一个内置的 PDF 下载器，让您可以使用一个简单的命令将 table 下载为 pdf
table.download("pdf", "table.pdf");
有关详细信息，请参阅 PDF Download Documentation
正在打印 table
因为 Tabulator 使用虚拟 DOM 只有 table 的可见行实际存在，其余的在滚动时创建和销毁，所以打印 table 只会得到你是可见的行。
如果您想打印整个 table，那么您应该查看 Print Documentation，它将带您了解如何启用打印样式并显示整个 table：
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printStyled:true, //copy Tabulator styling to HTML table
});
HTML 导出
如果您只是想要 table 的 HTML 等价物，则 getHTML 函数将 return 一个简单的 HTML 等价物 table，你可以用任何你喜欢的方式使用：
var htmlTable = table.getHtml();
有关此选项的完整详细信息，请参见 HTML Table Export Documentation