多页面分页打印功能实现

         这篇文章主要记录自己在做项目时,遇到某个页面信息通过复选框的操作,多个页面同时打印的功能,因为本身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>

        效果大致如下

《多页面分页打印功能实现》

    原文作者:sakuraxiaoyu
    原文地址: https://blog.csdn.net/qq_40830369/article/details/118337044
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞