我在 Angular 中使用 Datatables.Net。一切正常。 我能够添加打印按钮并预览表格的内容。但我想自定义它并在我的表格上方添加更多详细信息,以便在预览中我可以看到我想要添加的数据,我这样做是为了打印内容或将其另存为 .pdf。
正在寻找可以添加将在打印预览中呈现的动态 html 代码的内容
下面是我的Datatable初始化方法
$('#myTable').DataTable({
data: this.data,
retrieve: true,
orderClasses: false,
responsive: true,
scrollX: true,
paging: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Excel',
},
{
extend: 'print',
title: 'Print Table',
}
],
"columns": [
{ "data": "Col1", className: "text-center", width: "17%" },
{ "data": "Col2", className: "text-center", width: "17%" },
{ "data": "Col3", className: "text-center", width: "20%" },
{ "data": "Col4", className: "text-center", width: "20%" },
{ "data": "Col5", className: "text-center", width: "17%" }
]
});
index.html 上的 css 引用
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
我的 angular-cli 中的脚本引用
"assets/datatable/js/jquery.dataTables.min.js",
"assets/datatable/js/dataTables.buttons.min.js",
"assets/datatable/js/buttons.flash.min.js",
"assets/datatable/js/jszip.min.js",
"assets/datatable/js/pdfmake.min.js",
"assets/datatable/js/vfs_fonts.js",
"assets/datatable/js/buttons.html5.min.js",
"assets/datatable/js/buttons.print.min.js",
最佳答案
试试这个 DataTables
在脚本中的打印标题下添加以下代码
{
extend: 'print',
title: '',
customize: function (win) {
$(win.document.body)
.css('font-size', '10pt')
.prepend(
'<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
var innerHtmlData = "<div class=" + '"row text-center" style="font-size:22px;font-weight:bold;">Header</div>';
win.document.activeElement.innerHTML = innerHtmlData;
}
}
可以自定义预览,添加到activeElement的innerHtml
关于javascript - 如何在 Angular 中使用 Datatables.Net 创建自定义打印预览屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57925774/