[JavaScript知识库] Vue + JsBarcode 批量打印标签

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue + JsBarcode 批量打印标签 -> 正文阅读

[JavaScript知识库]Vue + JsBarcode 批量打印标签

1、引入JsBarcode

import JsBarcode from 'jsbarcode';

2、批量选择页面列表数据

?3、循环选择的数据集，创建要打印的HTML内容

        <div ref="printDiv" style="display:none;">
            <div v-for="item in selectedRows" :key="item.batchNumber" style="page-break-after:always;">
                <div style="margin-top:7px;">
                    <img :src="item.batchNumber | creatBarCode(item.batchNumber)" style="width:auto; height:150px"/>
                </div>
                <div style="font-size:30px;margin-top:7px;">
                    业务类型：{{item.businessType}}
                </div>
                <div style="font-size:30px;margin-top:7px;">
                    物流渠道：{{item.courier}}
                </div>
            </div>
        </div>

这里有点要讲一下，就是循环的div的样式（style）要加上page-break-after:always;

<div v-for="item in selectedRows" :key="item.batchNumber" style="page-break-after:always;">

4、利用JsBarcode生成条码，输出图片给img标签

        creatBarCode(barCodeData, printData) {
            console.log("触发条码生成事件");
            console.log(printData);
            let canvas = document.createElement("canvas");
            JsBarcode(canvas, barCodeData, {
                format: "CODE128",
                displayValue: true,
                margin: 0,
                height: 125,
                width: 2,
                fontSize: 30,
                textMargin: 10,
            });
            return canvas.toDataURL("image/png");
        }

5、利用iframe打印局部内容

<iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;"></iframe>

        onPrint(){
            if(!this.selectedRows || this.selectedRows.length == 0){
                this.$Message.error({content: "请选择要打印批次号！", duration:5});
                return;
            }

            this.printData.count = this.selectedRows.length;

            var printIframe = this.$refs.printIframe;
            var html = this.$refs.printDiv.innerHTML;
            printIframe.setAttribute('srcdoc', html);
            printIframe.onload = function () {
                console.log(printIframe.contentWindow);
                // 去掉iframe里面的dom的body的padding margin的默认数值
                printIframe.contentWindow.document.body.style.padding = '0px';
                printIframe.contentWindow.document.body.style.margin = '0px';
                // 开始打印
                printIframe.contentWindow.focus();
                printIframe.contentWindow.print();
            };
        }

6、看一下效果