多页面分页打印功能实现

这篇文章主要记录自己在做项目时，遇到某个页面信息通过复选框的操作，多个页面同时打印的功能，因为本身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].returnOrderCodeconsole.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]?.companyCodeconsole.log(document.getElementById(`enterpriseCode${index}`))document.getElementById(`returnDate${index}`).innerHTML = batchPrint[index]?.createTimedocument.getElementById(`barCode${index}`).innerHTML = batchPrint[index]?.returnOrderCodedocument.getElementById(`returenInstruction${index}`).innerHTML = batchPrint[index]?.descriptiondocument.getElementById(`returnNumber${index}`).innerHTML = batchPrint[index]?.returnOrderNumdocument.getElementById(`returnReciver${index}`).innerHTML = batchPrint[index]?.recipientNamedocument.getElementById(`receiverEmail${index}`).innerHTML = batchPrint[index]?.recipientEmaildocument.getElementById(`receiverPhone${index}`).innerHTML = batchPrint[index]?.recipientPhonedocument.getElementById(`receiverDepartment${index}`).innerHTML = batchPrint[index]?.recipientDepartmentdocument.getElementById(`shareReceiver${index}`).innerHTML = batchPrint[index]?.userNamedocument.getElementById(`shareReceiverPhone${index}`).innerHTML = batchPrint[index]?.userPhone})window.print()},1000)}
</script>

效果大致如下

多页面分页打印功能实现相关推荐

php可以打印一个页面,利用html实现分页打印功能的实例详解
本篇介绍利用html实现分页打印功能的实例详解,有些不想打印出来的分页打印的都可以应用这类样式进行控制在非打印时是无效的. 页面打印 /* 应用这个样式的在打印时隐藏 */ .noPrint { d ...
java实现分页打印功能_web 页面分页打印的实现
1．首先引入一个WebBrowser在需要打印的页面,可以直接添加: 复制代码代码如下: 到页面,或者使用javascript在需要的时候临时添加也可以: 复制代码代码如下: document.b ...
js设置html打印不分页,JS 使用 window对象的print方法实现分页打印功能
最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CS ...
html页面实现打印功能
html页面实现打印功能可用代码效果截图之前领导让我写一个html页面,可以进行打印,我上网搜了一下,html页面实现打印功能的博客有很多,这里我就不一一介绍了,直接上干货. 可用代码 < ...
用JS在html页面实现打印功能
用JS在html页面实现打印功能打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先 ...
js设置html打印不分页,web 页面分页打印的实现
1．首先引入一个WebBrowser在需要打印的页面,可以直接添加: 到页面,或者使用JavaScript在需要的时候临时添加也可以: document.body.insertAdjacentHTML ...
Vue页面实现打印功能
实现打印功能,需要安装一个插件vue-print-nb,使用方法如下 1)安装全局的插件 npm install vue-print-nb -S 2)在main.js中注册 import Print ...
HTML 网页打印实现分页打印功能
<html><head><title>页面打印</title><!--media=print 这个属性在打印时有效有些不想打印出来的分页打印的都 ...
HTML网页打印实现分页打印功能
<html><head><title>页面打印</title><!--media=print 这个属性在打印时有效有些不想打印出来的分页打印的都 ...

多页面分页打印功能实现

多页面分页打印功能实现相关推荐

最新文章

热门文章