Vue Print Receipt With Detail vue 打印带明细的票据- CCPrintingAPI Vue js 打印API接口

Vue Print Receipt With Detail vue 打印带明细的票据- CCPrintingAPI Vue js 打印API接口,,vue print,vue静默打印,vue打印,vue实现打印,web 打印, js打印, js 打印, Javascript 打印, js 静默打印,js 不预览打印,浏览器打印,js标签打印,js单据打印,ChicoreDriver,vue 明细票据打印,vue打印小票,vue打印单据 ,CCPrintingAPI for Vue 静默打印带有明细的商业小票，API接口的使用方法, Vue js 打印接口快速上手，打印范例代码，vue 单据打印,vue 票据打印，很容易集成。

CCPrintingAPI

兼容

150

个品牌，

8000

个型号标签及票据打印机

同时支持热敏/热转印条码标签打印机，票据打印机，激光、喷墨、针式打印机

不仅仅支持

前端浏览器Web

打印的API接口

CCPrintingAPI

配备CCPrintingAPI的标签打印机

Vue Javascript

Javascript

Java

Python

VB 6.0/VBScript

C/C++

打印机

ChicoreDriver

链接

视频号教程

微信客服

Vue API 打印带有明细的票据

Vue

Vue 打印机开发接口,Vue Print Receipt With Detail vue 打印带明细的票据，通过Vue调用CCPrintingAPI打印机接口API,打印票据，打印小票，打印单据，打印报表。

获取打印机列表打印1单打印2单打印3单预览

1. 使用设计器设计模板

使用智高标签打印软件（可以在我们官网下载），按照要打印的样式，设计打印模板，并保存文件，将模板文件保存在本地或服务器，打印时，通过指定的属性配置模板文件。

CCPrintingAPI，也支持无模板打印，可以直接使用代码进行模板的构建。

使用智高标签打印软件 CCPrintingAPI 打印带有明细的票据打印明细小票

2. Vue项目中,引入 CCPrintingAPI.min.vue.js

引入CCPrintingAPI.min.vue.js后，即可使用API的相关方法，进行设置和打印操作。

import { CCPrintingAPI } from '../../js/CCPrintingAPI.min.vue.js'

3. 如何获取打印机列表

获取计算机上安装的所有打印机, 在调用API接口的打印方法时，指定该列表的打印机名称进行打印。如果能确保打印机名称不变，该操作也可省去。如果使用我们的打印机，可以直接使用订购时的免驱打印机名称，不用安装驱动，也无需使用此代码获取打印机列表。


    GetPrinters: function () {
    var cfgData = new Object;
    cfgData.XAction = "Printers";
    cfgData.XOpenId = m_OpenId;
    cfgData.XTokens = m_Tokens;
    CCPrintingAPI.Excute(cfgData,
    XTimeout => { },
    XFail => {
    this.mytipsmessage = 'API可能未安装或未启动, ' + XFail;
    },
    XSuccess => {
    var d = new Date;
    this.timetick = d.getTime();
    var apiResult = JSON.parse(XSuccess.trim());
    if (apiResult.Status == "1") {
        if (apiResult.Message.length > 1) {
            this.options = [];
            for (var i = 1; i < apiResult.Message.length; i++) {
                var op = new Object;
                op.text = apiResult.Message[i];
                op.value = apiResult.Message[i];
                this.options.push(op);
            }
            /*设置上次使用的打印机*/
            this.selected = this.options[0].value;
        }
    } else {
        if (apiResult.Message.length > 1)
            this.mytipsmessage = apiResult.Message[0] + " :  " + apiResult.Message[1];
        else
            this.mytipsmessage = apiResult.Message[0];
        }
    }
    );
    }

4. 打印

进行相关参数设置后（指定打印机，设置模板，设置打印数据），将指令通过API传给打印机。


    Print: function (arr) {
    var cfgData = new Object;
    cfgData.XAction = "Print"
    cfgData.XOpenId = m_OpenId;
    cfgData.XTokens = m_Tokens;
    /*指定打印机*/
    cfgData.PrinterName = this.selected;
    /*模板方式，0-客户端模板，1-远程模板，
    2-如果本地模板存在，使用本地，不存在使用远程模板，3-不使用模板*/
    cfgData.TemplateMode = "1";
    /*远程模板URL或本地模板的文件夹*/
    cfgData.TemplateURL = "http://img.51321.cn/web/chicore/VPrinting/API";
    //cfgData.TemplateURL =  "E:\\临时数据\\打印\\打印样本\\API标签模板";
    /*模板文件名*/
    cfgData.TemplateName = "Label1-Receipt.Lblx";
    /*打印数据的类型，0-数组，1-Json数组，元素为JSON对象，字段：值*/
    cfgData.PrintDataType = 1;
    /*传递打印数据 Json数组*/ /*内容不允许 半角的逗号及半角的分隔符*/
    cfgData.PrintData = JSON.stringify(arr);
    /*打印 发送给打印机进行打印*/
    CCPrintingAPI.Excute(cfgData,
    XTimeout => { },
    XFail => {
        this.mytipsmessage = 'API可能未安装或未启动, ' + XFail;
    },
    XSuccess => {
    var d = new Date;
    this.timetick = d.getTime();
    var apiResult = JSON.parse(XSuccess.trim());
    if (apiResult.Status == "1") {
        var smsg = apiResult.Message[0];
        if (apiResult.Message.length > 1)
            smsg += " : " + apiResult.Message[1]
            this.mytipsmessage = smsg;
        } else {
        if (apiResult.Message.length > 1)
            this.mytipsmessage = apiResult.Message[0] + " :  " + apiResult.Message[1];
        else
            this.mytipsmessage = apiResult.Message[0];
        }
    }
    );
    }

4. 1 打印1单

API传1单数据，打印1个订单票据。


                    Print1:function(){
                        var arr = [
{"orderid":"2023030919103001","pname":"电源适配器24V 2.5A","orderdate":"2023/03/09 19:10:31","sn":"81322","qty":"6"},
{"orderid":"2023030919103001","pname":"LED光源","orderdate":"2023/03/09 19:10:30","sn":"49267","qty":"3"},
{"orderid":"2023030919103001","pname":"CCXt标签打印机","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"}
];
                        Print(arr);
                    }

4. 2 打印2单

API传2单数据，打印2个订单票据。


                    Print2:function(){
                        var arr = [
{"orderid":"2023030919103001","pname":"电源适配器24V 2.5A","orderdate":"2023/03/09 19:10:31","sn":"81322","qty":"6"},
{"orderid":"2023030919103001","pname":"LED光源","orderdate":"2023/03/09 19:10:30","sn":"49267","qty":"3"},
{"orderid":"2023030919103001","pname":"CCXt标签打印机","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"},
{"orderid":"2023030919103002","pname":"HW手机Mate90","orderdate":"2023/03/09 18:07:07","sn":"69092","qty":"5"},
{"orderid":"2023030919103002","pname":"CCPrintingAPI许可证","orderdate":"2023/03/09 18:07:06","sn":"47505","qty":"10"},
{"orderid":"2023030919103002","pname":"UGEE显示器","orderdate":"2023/03/09 17:18:15","sn":"26612","qty":"7"},
{"orderid":"2023030919103002","pname":"MBOX MUSIC Play","orderdate":"2023/03/09 17:18:10","sn":"75149","qty":"2"},
{"orderid":"2023030919103002","pname":"鸿蒙Harmony","orderdate":"2023/03/09 17:18:05","sn":"51926","qty":"4"}
];
                        Print(arr);                        
                    }

4. 3 打印3单

API传3单数据，打印3个订单票据。


                    Print3:function(){                        
                        var arr = [
{"orderid":"2023030919103001","pname":"电源适配器24V 2.5A","orderdate":"2023/03/09 19:10:31","sn":"81322","qty":"6"},
{"orderid":"2023030919103001","pname":"LED光源","orderdate":"2023/03/09 19:10:30","sn":"49267","qty":"3"},
{"orderid":"2023030919103001","pname":"CCXt标签打印机","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"},
{"orderid":"2023030919103002","pname":"HW手机Mate90","orderdate":"2023/03/09 18:07:07","sn":"69092","qty":"5"},
{"orderid":"2023030919103002","pname":"CCPrintingAPI许可证","orderdate":"2023/03/09 18:07:06","sn":"47505","qty":"10"},
{"orderid":"2023030919103002","pname":"UGEE显示器","orderdate":"2023/03/09 17:18:15","sn":"26612","qty":"7"},
{"orderid":"2023030919103002","pname":"MBOX MUSIC Play","orderdate":"2023/03/09 17:18:10","sn":"75149","qty":"2"},
{"orderid":"2023030919103002","pname":"鸿蒙Harmony","orderdate":"2023/03/09 17:18:05","sn":"51926","qty":"4"},
{"orderid":"2023030919103003","pname":"PCB ROHS 线路板","orderdate":"2023/03/09 17:18:03","sn":"97951","qty":"6"},
{"orderid":"2023030919103003","pname":"GPTX 工业打印机","orderdate":"2023/03/09 17:18:01","sn":"54115","qty":"8"}
];
                        Print(arr);
                    }

5. 预览

进行相关参数设置后，获取单据的预览。


                    Printpreview: function (arr) {
                        this.myhid = '';
                        this.mytipsmessage = '';
                        this.timetick = '';
                        var cfgData = new Object;
                        cfgData.XAction = "Print"
                        cfgData.XOpenId = m_OpenId;
                        cfgData.XTokens = m_Tokens;
                        cfgData.Preview = "3";	
                        /*指定打印机*/
                        cfgData.PrinterName = this.selected;
                        /*模板方式，0-客户端模板，1-远程模板，
                                    2-如果本地模板存在，使用本地，不存在使用远程模板，3-不使用模板*/
                        cfgData.TemplateMode = "1";
                        /*远程模板URL或本地模板的文件夹*/
                        cfgData.TemplateURL = "http://img.51321.cn/web/chicore/VPrinting/API";
                        //cfgPrintSettings.TemplateURL =  "E:\\临时数据\\打印\\打印样本\\API标签模板";
                        /*模板文件名183601-100X100*/
                        cfgData.TemplateName = "Label1-Receipt.Lblx";
                        /*打印数据的类型，0-数组，1-Json数组，元素为JSON对象，字段：值*/
                        cfgData.PrintDataType = 1;
                        /*传递打印数据 Json数组*/ /*内容不允许 半角的逗号及半角的分隔符*/
                        cfgData.PrintData = JSON.stringify(arr);
                        /*打印 发送给打印机进行打印*/
                        CCPrintingAPI.Excute(cfgData,
                            XTimeout => { },
                            XFail => {
                                this.mytipsmessage = 'API可能未安装或未启动, ' + XFail;
                            },
                            XSuccess => {
                                var d = new Date;
                                this.timetick = d.getTime();
                                var apiResult = JSON.parse(XSuccess.trim());
                                if (apiResult.Status == "1") {
                                    var smsg = apiResult.Message[0];
                                    if (apiResult.Message.length > 1)
                                        smsg += " : " + apiResult.Message[1]
                                    this.mytipsmessage = "";
                                } else {
                                    if (apiResult.Message.length > 1)
                                        this.mytipsmessage = apiResult.Message[0] + " :  " + apiResult.Message[1];
                                    else
                                        this.mytipsmessage = apiResult.Message[0];
                                }
                            }
                        );
                    }

5. 1 获取预览

API传1单数据，获取1单预览。


                    Printpreview1:function(){
                        var arr = [
{"orderid":"2023030919103001","pname":"电源适配器24V 2.5A","orderdate":"2023/03/09 19:10:31","sn":"81322","qty":"6"},
{"orderid":"2023030919103001","pname":"LED光源","orderdate":"2023/03/09 19:10:30","sn":"49267","qty":"3"},
{"orderid":"2023030919103001","pname":"CCXt标签打印机","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"}
];
                        Printpreview(arr);
                    }