起因

资产、设备管理必备的二维码条形码打印

原理

所需插件 vue-print-nb 本文版本1.7.5

构建所需要打印的内容，利用vue-print-nb进行打印。二维码条形码打印的本质就是图片打印

代码

html部分

<div ref="printDom"
             id="printDom">
             //你想要打印的内容
</div>
//启动打印
<el-button v-print="printContent"
                   class="startPrintBtn"
                   type="primary"
                   size="mini">打印</el-button>

js

data() {
        return {
            printContent: {
                id: "printDom", // 打印的区域
                preview: false, // 预览工具是否启用
                previewTitle: "", // 预览页面的标题
                popTitle: "", // 打印页面的页眉
                // extraCss: "", //css 尽量不要在此设置样式
                previewBeforeOpenCallback(vue) {
                    console.log("正在加载预览窗口");
                },
                previewOpenCallback(vue) {
                    console.log("已经加载完预览窗口");
                },
                clickMounted: (vue) => {
                    console.log("触发点击打印回调");

                    vue.isShowPrint = true; //弹框显示条码
                },
                beforeOpenCallback(vue) {
                    console.log("打开之前", vue.barcodeNum);
                },
                openCallback(vue) {
                    console.log(vue);
                    vue.isShowPrint = false; // 关闭条码显示弹框
                    console.log("执行了打印", vue.barcodeNum);
                },
            },
            fontSizeText: "16px",
            lineHeightText: "16px",
        };
    },
    methods: {
        startPrint() {
            if (this.printInfo.coName.length > 8) {
                this.fontSizeText = "12px";
            }
            let btn = document.querySelector(".startPrintBtn");
            btn.click();
            // console.log(window.matchMedia("print").matches);
            // console.log(window.matchMedia("print"));
        },
    },

css

注意：在页面上设置的样式打印时是没效果的，这里需要用过媒体查询来设置样式

<style scoped media="print">
//设置纸张样式
@page {
    size: auto;
    margin: 0 2mm;
}
</style>

使用px来设置距离需谨慎，相同px在不同纸张呈现大小可能是不相同的。小距离的变动px是无法呈现的。（举个栗子：在某一纸张上1px=0.3mm，此时我只想上移0.2mm）

总代码

<template>
    <div class="printDom-box">
        <div ref="printDom"
             id="printDom">
            <div v-if="printInfo.type=='brcode'">
                <div class="title"
                     :style="{'font-size': fontSizeText,'line-height':lineHeightText}">{{ printInfo.coName }}</div>
                <div class="line"></div>
                <p>{{ printInfo.snCode }}</p>
                <div class="img-box">
                //二维码、条形码图片 替换即可使用
                    <img v-if="printInfo.barCodePic"
                         :src="printInfo.barCodePic"
                         alt="">
                </div>
            </div>
            <div v-else>
                <div class="qrcode-img-box">
                    <img v-if="printInfo.barCodePic"
                         :src="printInfo.barCodePic"
                         alt="">
                </div>
            </div>
            <p>{{ printInfo.barCode }}</p>
        </div>
        <!-- style="visibility: hidden;" -->
        <el-button v-print="printContent"
                   class="startPrintBtn"
                   type="primary"
                   size="mini">打印</el-button>
    </div>
</template>
<script>
import JsBarcode from "jsbarcode";
import print from "vue-print-nb";
export default {
    props: ["printInfo"],
    directives: {
        print,
    },
    mounted() {},
    data() {
        return {
            printContent: {
                id: "printDom", // 打印的区域
                preview: false, // 预览工具是否启用
                previewTitle: "", // 预览页面的标题
                popTitle: "", // 打印页面的页眉
                // extraCss: "", //css
                previewBeforeOpenCallback(vue) {
                    console.log("正在加载预览窗口");
                },
                previewOpenCallback(vue) {
                    console.log("已经加载完预览窗口");
                },
                clickMounted: (vue) => {
                    console.log("触发点击打印回调");

                    vue.isShowPrint = true; //弹框显示条码
                },
                beforeOpenCallback(vue) {
                    console.log("打开之前", vue.barcodeNum);
                },
                openCallback(vue) {
                    console.log(vue);
                    vue.isShowPrint = false; // 关闭条码显示弹框
                    console.log("执行了打印", vue.barcodeNum);
                },
            },
            fontSizeText: "16px",
            lineHeightText: "16px",
        };
    },
    methods: {
        startPrint() {
            if (this.printInfo.coName.length > 8) {
                this.fontSizeText = "12px";
            }
            let btn = document.querySelector(".startPrintBtn");
            btn.click();
            // console.log(window.matchMedia("print").matches);
            // console.log(window.matchMedia("print"));
        },
    },
};
</script>
<style lang="scss" scoped>
.printDom-box {
    visibility: hidden;
    position: absolute;
    top: 0;
    img {
        width: 500px;
        height: auto;
    }
}
</style>
<style scoped media="print">
@page {
    size: auto;
    margin: 0 2mm;
}
#printDom {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    margin: auto 0;
    line-height: 2.2mm;
}
#printDom .title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0.8mm;
}
p {
    margin-top: 1mm;
    font-size: 1mm !important;
}
.line {
    height: 0.1mm;
    width: 100%;
    background-color: #000;
    margin: 0.5mm 0;
}
.img-box {
    height: 10mm;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    margin-top: 1mm;
}
.qrcode-img-box {
    /* height: 16mm; */
    padding: 0;
    overflow: hidden;
}
.qrcode-img-box img {
    height: 18mm;
    width: 18mm;
    margin-top: 0mm;
    /* margin: auto 0; */
}
</style>

成果图