vue实现页面打印（记录一下~）

灵感来源：大佬优秀的总结！

在template中

<template>
    <div>
        //要打印的内容
        <div  id="print">
            <div class="temp" :style="{width:widthnumber + 'px',height:heightnumber + 'px'}">
                <div class="box">
                    <div class="material">
                    <span>Name：</span>
                    <span>{{info.marName}}</span>
                    </div>
                    <div>
                        <img id="barcode1">
                    </div>
                    <div id="SetQRCode"></div>
                </div>
            </div>
        </div>

        <button class="btnPrint" @click="doPrint">打印</button>
    </div>
</template>

这里可以单独写一个js，便于使用

    // 新建DOM，将需要打印的内容填充到DOM
    function getPrintContainer(html) {
        // 清除打印
        cleanPrint();
        let container = document.createElement("div");
        container.setAttribute("id", "print-container");
        container.innerHTML = html;
        return container;
        }
    // 设置打印样式
    function getStyle() {
            // 新建的dom不需要在页面上展示
            let styleContent = `#print-container {
            display: none;
        }
        @media print {
            body > :not(.print-container) {
            display: none;
        }
        html,
        body {
            display: block !important;
        }
        #print-container {
            display: block;
        }
        .temp{
            margin: 100px auto;
            text-align: left;
            overflow: hidden;
        }
        .temp .box{
            position: relative;
        }
        #SetQRCode{
            position: absolute;
            top: 30px;
            right: 0px;
        }`;
        let style = document.createElement("style");
        style.innerHTML = styleContent;
        return style;
    }
    // 清空打印的DOM
    function cleanPrint() {
        let divDOM = document.getElementById('print-container')
        // 判断是否存在，有则删除
        if (divDOM) {
        document.querySelector('body').removeChild(divDOM)
        }
    }
    
    // 等待图片完全加载后再调用打印方法
    function getLoadPromise(dom) {
        let imgs = dom.querySelectorAll("img");
        imgs = [].slice.call(imgs);
        if (imgs.length === 0) {
        return Promise.resolve();
        }
        let finishedCount = 0;
        return new Promise(resolve => {
            function check() {
                finishedCount++;
                if (finishedCount === imgs.length) {
                    resolve();
                }
            }
            imgs.forEach(img => {
                img.addEventListener("load", check);
                img.addEventListener("error", check);
            })
        });
    }
    // 默认暴露打印方法
        export default function printHtml(html) {
            let style = getStyle();
            let container = getPrintContainer(html);
            document.body.appendChild(style);
            document.body.appendChild(container);
            getLoadPromise(container).then(() => {
            // 打印
            window.print();
            document.body.removeChild(style);
            // 如果body中有则删除（这里最好判断一下，避免使用时报错）
            if(document.body.contains(container)){
                document.body.removeChild(container);
            }
        });
    }

在需要用到打印的页面中引入上述js

import printHtml from '../assets/js/print'

获取要打印的内容，调用打印方法

doPrint(){
    //这里也可不调用定时器，根据自身需求选择即可
    setTimeout(()=>{
        // 取自己页面需要打印内容的标签
        let printDocument = document.getElementById("print");
        // 取出需要打印的内容
        let printData = printDocument.innerHTML;
        // 调用打印方法
        printHtml(printData);
    },1000)
}

后续记录......(项目开发中被告知需要实现的是批量打印！)

<template>
    <div>
        <div id="print">
            //要打印的内容
            <div v-for="(item,index) in marArr" :key="index" style="page-break-after:always">
                <div class="temp" :style="{width:widthnumber + 'px',height:heightnumber + 'px'}">
                    <div class="box">
                        <div class="material">
                            <span>Name：</span>
                            <span>{{item.marName}}</span>
                        </div>
                        <div>
                           <img id="barcode1">
                        </div>
                        <div :id="setId(index)" style="position:absolute;top:30px;right:0px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <button class="btnPrint" @click="doPrint">打印</button>
    </div>
</template>

//在methods中
setId(index){
    return "SetQRCode"+index
}

循环生成条码和二维码

getQrCode(){
            for(let i = 0 ; i < this.marArr.length ; i++){
                let qrCode = "#"+this.marArr[i].marId+"#"+this.marArr[i].supManufacturingBatch+"#"+this.marArr[i].exp+"#"+this.marArr[i].minflowId+"#"+this.marArr[i].num;
                document.getElementById("SetQRCode"+i).innerHTML = '';
            this.QRCode = qrCode;
            let qrcodeDiv = document.getElementById("SetQRCode"+i)
            let qrcode = new QRCode(qrcodeDiv,{
                text:this.QRCode,
                width:this.QRWidth,
                height:this.QRHeight,
                colorDark:"#000",
                correctLevel: QRCode.CorrectLevel.L
            })
            this.qrcode = qrcode;
            qrcode.makeCode(qrCode)

            let barCode1 = this.marArr[i].marIdCode;
            let barheight = this.imgHeight;
            JsBarcode("#barcode1",barCode1,{
                format:"CODE128",//条形码的格式
                width:1,//设置条之间的宽度
                height:barheight,//高度
                textPosition:"bottom",//设置文本的垂直位置
                lineColor:"#000",//设置条和文本的颜色
                displayValue:false,//设置是否显示文字
                margin:2//设置条形码周围的空白边距
            })
            let barCode2 = this.marArr[i].minflowCode;
            JsBarcode("#barcode2",barCode2,{
                format:"CODE128",
                width:1,
                height:barheight,
                textPosition:"bottom",
                lineColor:"#000",
                displayValue:false,
                margin:2
            })
            }
        },