<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页打印 - JS分页打印使用window对象print的方法实现</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div><input type="button" value="分页打印" onclick="pagePrint()" /></div>
<script language="javascript">
//分页打印代码
function pagePrint() {
var imgs = [
'https://g.csdnimg.cn/side-toolbar/2.5/images/qr_wechat.png',
'https://g.csdnimg.cn/side-toolbar/2.5/images/qr_wechat.png',
'https://g.csdnimg.cn/side-toolbar/2.5/images/qr_wechat.png'
];
var body = "<body>";
for (var i = 0; i < imgs.length; i++) {
//设置分页page-break-after:always
body += '<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always">';
body += '<tr>';
body += '<td><img src="' + imgs[i] + '" width="280"></td>';
body += '</tr>';
body += '</table>';
}
body += '</body>';
//打印页面头文件
var head = '<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>';
//去掉打印页眉页脚的样式
var style = '<style media="print">@page {size: auto;margin: 0mm;}</style>';
var printWindow = window.open("Print.htm", "print"); //本地测试,需要新建Print.html,域中使用,不需要
printWindow.document.write('<html>' + head + body + style + '</html>');
printWindow.document.close(); //这句很重要,没有就无法实现
printWindow.print();
}
</script>
</body>
</html>