这篇文章主要记录自己在做项目时,遇到某个页面信息通过复选框的操作,多个页面同时打印的功能,因为本身window.print()只能打印一张,遇到多个页面时会开多个页面然后进程中断的现象。
像这边选中了两个数据,希望可以同时打印。
首先需要选中这些数据,点击按钮后获取到这些数据,并且把这些数据存在一个数组中,然后暂时缓存在页面上。
let batchPrint = () => {
if (tableselectedvalue.length == 0) {
return message.error('请选择数据!')
}
else if(tableselectedvalue.length > 5){
return message.error('最多同时打印五张!')
}
// 要把选中的详情内容全部暂存在一个数组里面
let tempdata = []
tableselectedvalue.forEach((element) => {
tempdata.push(element)
})
console.log('选中的全部数据',tempdata)
//sessionStorage.setItem()就是把数据暂时缓存在页面上,
//JSON.stringify(),把字符串转换为JSON格式
sessionStorage.setItem('batchPrint', JSON.stringify(tempdata))
//打开被打印的H5页面,这是提前写好的模板
window.open('/batchPrint.html')
}
H5页面就没有组件使用了,需要自己写样式。这里主要讲怎么怎么把页面拼接。因为每个页面都是一张A4纸大小,一条信息打印一个页面。
首先要做的是获取到页面缓存的内容,然后把JSON格式转化为JS可以识别的格式。
const batchPrint = JSON.parse(sessionStorage.getItem('batchPrint'))
实现多页面的核心思想就是拼接,利用拼接的字符 ‘+=’ 把多个页面拼起来。
let batchPrintList = ""
//对传过来的数组进行遍历
batchPrint.forEach((element,index) => {
batchPrintList +=
//这行代码主要起到换行的作用
`<div style="width:1000px;height: 100%;margin: 20px auto;page-break-after: always;">
//考虑到每个页面的不同,对应同一数组不同的下标。
<div class="p_title"><span style="width: 200px;">企业代码:</span> <span id="enterpriseCode${index}" class="span_content"></span></div>
//这里面放不同的<div>,构起整体框架
</div>`
上面有设置id, 起到标识的作用,我们就要根据id来来对节点进行操作。
//通过innerHTML把获取到的值给到对应的节点
document.getElementById(`enterpriseCode${index}`).innerHTML = batchPrint[index]?.companyCode
打印
window.print()
整体的一个代码如下。
<body class="A4">
<div id="meg"></div>
</body>
<!-- 在实际打印多页的情况下,因为window.print()在整个进程中只能实现一次,所以当开了多了打印窗口后,只有关掉上一个才能继续下一个
解决这个问题的方法之一是把要打印多页面的内容合成一分,中间用分页符隔开,然后一次性打印出来-->
<script>
window.onload = function() {
const batchPrint = JSON.parse(sessionStorage.getItem('batchPrint'))
console.log('批量的打印退单说明书',batchPrint)
let batchPrintList = ""
batchPrint.forEach((element,index) => {
batchPrintList +=
`<div style="width:1000px;height: 100%;margin: 20px auto;page-break-after: always;">
<section class="sheet" style="position: relative;">
<img class="favicon" src="./icons/shanghaiElectric.png">
<div class="title">
<p style="margin-bottom: 66px;">退单说明书</p>
</div>
<div class="div_title">
<div style="padding: 10px;">
<div class="p_title"><span style="width: 200px;">企业代码:</span> <span id="enterpriseCode${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单日期:</span> <span id="returnDate${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">条形码:</span> <span id="barCode${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单说明:</span> <span id="returenInstruction${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单数量:</span> <span id="returnNumber${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单接收人:</span> <span id="returnReciver${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单接收人邮箱:</span> <span id="receiverEmail${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单接收人手机号:</span> <span id="receiverPhone${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">退单接收人所在部门:</span> <span id="receiverDepartment${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">共享退单联系人:</span> <span id="shareReceiver${index}" class="span_content"></span></div>
<div class="p_title"><span style="width: 200px;">共享退单联系人电话:</span> <span id="shareReceiverPhone${index}" class="span_content"></span></div>
</div>
</div>
<div class="div_barcode">
<img id="barcode${index}" style="height: 90px;"/>
</div>
</section>
</div>`
document.getElementById('meg').innerHTML = batchPrintList
});
// const batchPrint = JSON.parse(sessionStorage.getItem('batchPrint'))
batchPrint.forEach((element,index) => {
var returnBarcode = batchPrint[index].returnOrderCode
console.log('returnBarcode',returnBarcode)
JsBarcode(`#barcode${index}`,returnBarcode,{
format:"CODE128",
displayValue:true,
fontSize:20,
});
})
setTimeout(() => {
const batchPrint = JSON.parse(sessionStorage.getItem('batchPrint'))
batchPrint.forEach((element,index) => {
document.getElementById(`enterpriseCode${index}`).innerHTML = batchPrint[index]?.companyCode
console.log(document.getElementById(`enterpriseCode${index}`))
document.getElementById(`returnDate${index}`).innerHTML = batchPrint[index]?.createTime
document.getElementById(`barCode${index}`).innerHTML = batchPrint[index]?.returnOrderCode
document.getElementById(`returenInstruction${index}`).innerHTML = batchPrint[index]?.description
document.getElementById(`returnNumber${index}`).innerHTML = batchPrint[index]?.returnOrderNum
document.getElementById(`returnReciver${index}`).innerHTML = batchPrint[index]?.recipientName
document.getElementById(`receiverEmail${index}`).innerHTML = batchPrint[index]?.recipientEmail
document.getElementById(`receiverPhone${index}`).innerHTML = batchPrint[index]?.recipientPhone
document.getElementById(`receiverDepartment${index}`).innerHTML = batchPrint[index]?.recipientDepartment
document.getElementById(`shareReceiver${index}`).innerHTML = batchPrint[index]?.userName
document.getElementById(`shareReceiverPhone${index}`).innerHTML = batchPrint[index]?.userPhone
})
window.print()
},1000)
}
</script>
效果大致如下