vue项目中,多选列表,批量打印

image.png

项目需要

image.png

将文本和列表框打印到客户准备的固定大小的材料上
期初效果是这样,如下图

image.png

这样得设置纸张大小,边距,居中,而且还不一定每张纸都打印正确,会出现如下图情况

image.png

后面百度
通过https://blog.csdn.net/weixin_41488294/article/details/81705171?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7Edefault-3.queryctr&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7Edefault-3.queryctr&utm_relevant_index=5
了解到 page-break-after:always 实现页面分页打印
这样,可以给需要打印的容器设定该属性,即可实现,打印完后进行第二个内容分页.
这样不管内容有多少个,都会在新的页面打开进行打印

image.png image.png

template部分

 <div v-for="(item,index) of printDoubleData"
             :key="index"
             :id="'content'+ index"
             class="content">
            <!-- <div class="prinLeft">
                <div class="leftContent">
                    <div class="leftContentLeft">应急管理部政治部监制</div>
                    <div class="leftContentRight">
                        <div></div>
                        <div class="contRightB">政府专职消防员证</div>
                        <div class="contRightC">中华人民共和国应急管理部</div>
                    </div>
                </div>
            </div> -->
            <div class="prinRight">
                <div class="rightNumLeft">
                    <div class="photoDiv">
                        <img class="photo"
                             :src="item.certificatePhoto"
                             alt="">
                    </div>
                    <div style="margin-left:15.83px">
                        <div class="rightTitle">
                        </div>
                        <div class="rightTitle">
                        </div>
                        <div class="rightTitle">
                        </div>
                        <div class="rightTitles">
                        </div>
                    </div>
                </div>
                <div class="rightTabRight">
                </div>
            </div>
        </div>

js部分

const styleSheet = `<style>
body{margin: 0 0}
.content {width: 522px;height: 384.2px;background-color:#e2f4d2;page-break-after:always}
.prinRight {width: 519.7px;height: 384.2px;display: flex;justify-content: space-between;align-items: center;position: relative;font-family: STFangsong;}
.rightNumLeft {width: 53%;height: 100%;margin-left:12.5px;display: flex;flex-direction: column;justify-content: center;}
.photoDiv {width: 71px;height: 99px;text-align: center;margin-left:96px;margin-bottom: 12.5px;}
.photo {width: 100%;height: 100%}
.rightTitle {margin: 14.5px 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTitles {margin: 0 0;width: 100%;text-align: left;font-size: 15px;font-family: STFangsong;}
.rightTabRight {width: 47%;height:100%;display: flex;align-items: center;}
th,td {margin: 0;padding: 0;}
table {*border-style: solid;*border-color: #333;*border-width: 1px 0 0 1px;font-size: 13px;border-collapse: collapse;}
table td,table th {font-family: STFangsong;border-width: 1px;*border-width: 0 1px 1px 0;border-style: solid;border-color: #333;box-sizing: border-box;text-justify: inter-ideograph;}
table th {text-align: center;}
table td {color: #000;font-weight: bold;font-size: 17px;}
.border0 {padding: 0;*border-width: 0;}
.border0 table {margin-left: -1px;border-style: hidden;*border-style: solid;border-width: 0;}</style>`
//给div添加样式,调出打印界面
print() {
            const that = this
            const data = this.printDoubleData
            const params = {}
            console.log('this.printDoubleData: ', this.printDoubleData)
            //打印
            var newWin = window.open('') //新打开一个空窗口
            data.map((item, i) => {
                var imageToPrint = document.getElementById('content' + i) //获取需要打印的内容
                // console.log('imageToPrint: ', imageToPrint)
                newWin.document.write(imageToPrint.outerHTML) //将需要打印的内容添加进新的窗口
            })
            newWin.document.head.innerHTML = styleSheet //给打印的内容加上样式
            newWin.document.close() //在IE浏览器中使用必须添加这一句
            newWin.focus() //在IE浏览器中使用必须添加这一句
            if (data.length == 1) {
                params.certificateNumber = data[0].certificateNumber
                params.id = data[0].id
                params.userId = data[0].userId
                params.issuingResult = 1
            } else if (data.length > 1) {
                params.issuingResult = 1
                const certificatePrintList = []
                data.map((item) => {
                    certificatePrintList.push({ certificateNumber: item.certificateNumber, id: item.id, userId: item.userId })
                })
                params.certificatePrintList = certificatePrintList
            }

            setTimeout(function () {
                newWin.print() //打开打印窗口
                newWin.close() //关闭打印窗口
                issueUpdate(params).then(() => {
                    that.fetch()
                    that.$message.success('打印结束')
                })
            }, 100)
 },