js-table-print
Version:
一款智能打印插件，目标是处理表格的打印，实现自定义页头、页尾、水印、分页方式等
166 lines (144 loc) • 3.83 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="../lib/index.js"></script>
<link rel="stylesheet" type="text/css" href='./test.css' />
</head>
<body>
<button id="ok1">横向打印</button>
<button id="ok2">竖向打印</button>
<section id="print">
</section>
<script>
window.onload=function(){
var table=`
<h1 class="title">
产品申请单
<span>2021-01-01</span>
</h1>
<table >
<tbody>
<tr>
<td>申请人</td>
<td>测试人</td>
<td>申请人部门</td>
<td>测试部门</td>
</tr>
<tr>
<td>总额</td>
<td>￥123.00</td>
<td>备注</td>
<td>123123</td>
</tr>
</tbody>
</table>
<table>
<tbody><tr><td style="height:50px;">产品列表</td></tr></tbody>
</table>
<table>
<thead>
<tr>
<th>产品编码</th>
<th>产品名称</th>
<th>产品型号</th>
<th>单价(￥)</th>
<th>内采数量</th>
<th>总价(￥)</th>
</tr>
</thead>
<tbody>
@list
</tbody>
</table>
<hgroup style="padding:10px 0;border:1px solid #ccc;">
<div>这里的内容不要被分页切割1</div>
<div>这里的内容不要被分页切割2</div>
<div>这里的内容不要被分页切割3</div>
<div>这里的内容不要被分页切割4</div>
<div>这里的内容不要被分页切割5</div>
</hgroup>
<div style="page-break-before:always">插入一个强制分页</div>
<table>
<tbody><tr><td style="height:50px;">签收人</td></tr></tbody>
</table>
<table>
<tbody>
<tr style="height:100px;">
<td style="width:120px;">申请人</td>
<td></td>
<td style="width:120px;">收单人</td>
<td></td>
</tr>
<tr style="height:100px;">
<td>上级审批</td>
<td></td>
<td>CEO确认</td>
<td></td>
</tr>
<tr style="height:100px;">
<td>本人签字</td>
<td></td>
<td>签署日期</td>
<td></td>
</tr>
</tbody>
</table>
<div style="margin-top:20px">这里的内容可以被分页切割1</div>
<div>这里的内容可以被分页切割2</div>
<div>这里的内容可以被分页切割3</div>
<div>这里的内容可以被分页切割4</div>
<div>这里的内容可以被分页切割5</div>
<div>这里的内容可以被分页切割6</div>
<div>这里的内容可以被分页切割7</div>
<div>这里的内容可以被分页切割8</div>
<div>这里的内容可以被分页切割9</div>
<div>这里的内容可以被分页切割10</div>
`
let list='';
for(let i=0;i<3;i++){
var dom = `
<tr>
<td>${i}</td>
<td>${i}</td>
<td>${i}</td>
<td>${i}</td>
<td>${i}</td>
<td>${i}</td>
</tr>
`
list+=dom;
}
table=table.replace('@list',list);
var domPrint = document.querySelector('#print');
domPrint.innerHTML = table;
var header = document.createElement('div');
header.innerText='上海XXXX有限公司';
header.className='title';
var TablePrint = TablePrint||window['js-table-print'].default;
var landscape=true;
function DoPrint(){
let plugin = new TablePrint({
children:domPrint.children,
header:header,
footer:true,
landscape:landscape,
water:true,
debug:true
});
plugin.print(true);
}
document.querySelector('#ok1').onclick=function(){
landscape=true;
DoPrint();
}
document.querySelector('#ok2').onclick=function(){
landscape=false;
DoPrint();
}
}
</script>
</body>
</html>