Print.js文档传送门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web浏览器在线打印(打印多页功能)</title>
<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#" id="printJS-form">
<img src="https://www.shicimingju.com/pics/item/2973.jpg" alt="">
</form>
<br>
<button type="button" onclick="dayin()">
打印html
</button>
<div id="content">
<div id="printcontent">
</div>
</div>
<script src=" https://printjs-4de6.kxcdn.com/print.min.js" type="text/javascript" charset="utf-8"></script>
<script>
//动态生成的元素,要想实现打印分页的功能.必须要绑定在 添加节点的父级的id
var str =
`
<table>
<tr>
<th>名</th>
<th>作</th>
<th>内</th>
</tr>
<tr>
<td>浣溪沙</td>
<td>[宋] 赵彦端</td>
<td>菊已开时梅未通。似寒如暖意融融。情亲语妙一杯中。歌舞欲来须更理，林泉有乐政须同。好诗多味酒无功。</td>
</tr>
<tr>
<td>春暮</td>
<td>[宋] 方岳</td>
<td>卷中未有好诗看，草满池塘梦已残。客又不来春又暮，一帘新雨杏花寒。</td>
</tr>
</table>
<img src="https://www.shicimingju.com/pics/item/2973.jpg" alt="">
`;
for (var i = 0; i < 11; i++) {
$('#printcontent').after(str);
};
function dayin() {
printJS({
printable: 'content',
type: 'html',
header: '打印报表',
iframe: false, //是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
})
};
</script>
</body>
</html>
应用到项目中遇到问题! 打印地图,以及行车信息! 调试半天,愣是没效果,试了各种方法! 发现 jqprint.js 好像和原来写的css某些样式有冲突,导致不能打印分页!据我猜测: ** position: fixed; position: absolute; …这些属性导致的** 具体什么导致的.到现在还没搞清楚.
//css 写的行内样式
<body id="bodyId">
// 父容器
<div class="print-content" id="print-content-id" style="
display: flex;
justify-content: space-between;
">
//打印的地图 这个是最难搞的
<div id="i_container" style="width:78%; height:1024px" >
</div>
//打印的行车记录 信息
<div id="bb" style="width:20%;height:100%">
<span class="bb-left">部门：</span>
<span id="tdtname" class="bb-right"></span>
<br>
<span class="bb-left">时间：</span>
<span id="time" class="bb-right"></span>
<br>
<span class="bb-left">车牌号：</span>
<span id="carno" class="bb-right"></span>
<br>
<span class="bb-left">负责人：</span>
<span id="person" class="bb-right"></span>
<br>
<span id="totalkm"></span>
<div id="kai">
<span class="bb-left" style="size:16px;">开始位置：</span>
<span class="bRight1 bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="ting">
<span class="bb-left">停车位置：</span>
<span class="bRight bb-right"></span>
</div>
<div id="jie">
<span class="bb-left">结束位置：</span>
<span class="bRight2 bb-right"></span>
</div>
<button id="btn" onclick="dayin(list1)">打 印</button>
</div>
</div>
//修改了一下配置项
printJS({
printable: 'htmlId', //绑定的的是当前的html页面
type: 'html',
debug: false,
importCSS: true , //将此属性改为false；直接在style中写入样式即可
printContainer: true,
operaSupport: false
});
}
效果图
实现分页效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
