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部分

js部分

const styleSheet = ``
//给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)
 },