{首页主词},&

Vue Print Receipt With Detail vue 打印帶明細(xì)的票據(jù)- CCPrintingAPI Vue js 打印API接口,,vue print,vue靜默打印,vue打印,vue實(shí)現(xiàn)打印,web 打印, js打印, js 打印, Javascript 打印, js 靜默打印,js 不預(yù)覽打印,瀏覽器打印,js標(biāo)簽打印,js單據(jù)打印,ChicoreDriver,vue 明細(xì)票據(jù)打印,vue打印小票,vue打印單據(jù) ,CCPrintingAPI for Vue 靜默打印帶有明細(xì)的商業(yè)小票，API接口的使用方法, Vue js 打印接口快速上手，打印范例代碼，vue 單據(jù)打印,vue 票據(jù)打印，很容易集成。

適配

150+

品牌，

8000+

型號(hào)打印機(jī)

支持熱敏/熱轉(zhuǎn)印標(biāo)簽、票據(jù)打印機(jī)，激光、噴墨、針式打印機(jī)

CCPrintingAPI

更好用、更通用的打印機(jī) API 開發(fā)接口

文本圖片條碼二維碼序列號(hào) 生產(chǎn)日期有效期 GS1 UDI 等變量打印

支持開發(fā)語(yǔ)言：Java , C# , C, C++, Javascript, Vue js , Python, VB.net, VB6, VB script

UniApp, 小程序, HTTP POST 接口

購(gòu)開發(fā)接口專用版（特定打印機(jī)使用）

購(gòu)開發(fā)接口通用版（不限打印機(jī)型號(hào)）

詳情咨詢微信客服

通用版(不含打印機(jī))

不限打印機(jī)型號(hào)

適配標(biāo)簽機(jī) 激光噴墨針式

專用版(含打印機(jī))

ZPX5020t

熱轉(zhuǎn)印 200dpi

專用版(含打印機(jī))

ZPX5030t

熱轉(zhuǎn)印 300dpi

CCPrintingAPI

概述

功能特性

商業(yè)授權(quán)

配備CCPrintingAPI的標(biāo)簽打印機(jī)

更優(yōu)惠

多臺(tái)并行打印

視頻

多臺(tái)并行打印(ChicoreDriver)

視頻

熱敏標(biāo)簽打印機(jī) ZPX-4020d

含專用API

熱轉(zhuǎn)印標(biāo)簽打機(jī) ZPX-5020t

含專用API

熱轉(zhuǎn)印標(biāo)簽打機(jī) ZPX-5030t

含專用API

CCPrintingAPI 使用手冊(cè)

打印-Print

獲取打印機(jī)列表-Printers

模板設(shè)計(jì)

帶有明細(xì)的票據(jù)模板設(shè)計(jì)

Vue Javascript

Vue 打印快速上手

Vue API for

ChicoreDriver

Vue 打印帶有明細(xì)的票據(jù)

Vue 打印帶有明細(xì)的單據(jù)

Javascript

Javascript 打印條碼標(biāo)簽

無(wú)模板

Javascript 打印二維碼標(biāo)簽

Java

Python

VB 6.0/VBScript

C/C++

打印機(jī)

ChicoreDriver

鏈接

視頻號(hào)教程

微信客服

Vue API 打印帶有明細(xì)的票據(jù)

Vue

Vue 打印機(jī)開發(fā)接口,Vue Print Receipt With Detail vue 打印帶明細(xì)的票據(jù)，通過Vue調(diào)用CCPrintingAPI打印機(jī)接口API,打印票據(jù)，打印小票，打印單據(jù)，打印報(bào)表。

獲取打印機(jī)列表打印1單打印2單打印3單預(yù)覽

1. 使用設(shè)計(jì)器設(shè)計(jì)模板

使用智高標(biāo)簽打印軟件（可以在我們官網(wǎng)下載），按照要打印的樣式，設(shè)計(jì)打印模板，并保存文件，將模板文件保存在本地或服務(wù)器，打印時(shí)，通過指定的屬性配置模板文件。

CCPrintingAPI，也支持無(wú)模板打印，可以直接使用代碼進(jìn)行模板的構(gòu)建。

使用智高標(biāo)簽打印軟件 CCPrintingAPI 打印帶有明細(xì)的票據(jù) 打印明細(xì)小票

2. Vue項(xiàng)目中,引入 CCPrintingAPI.min.vue.js

引入CCPrintingAPI.min.vue.js后，即可使用API的相關(guān)方法，進(jìn)行設(shè)置和打印操作。

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

3. 如何獲取打印機(jī)列表

獲取計(jì)算機(jī)上安裝的所有打印機(jī), 在調(diào)用API接口的打印方法時(shí)，指定該列表的打印機(jī)名稱進(jìn)行打印。如果能確保打印機(jī)名稱不變，該操作也可省去。如果使用我們的打印機(jī)，可以直接使用訂購(gòu)時(shí)的免驅(qū)打印機(jī)名稱，不用安裝驅(qū)動(dòng)，也無(wú)需使用此代碼獲取打印機(jī)列表。


    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可能未安裝或未啟動(dòng), ' + 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);
            }
            /*設(shè)置上次使用的打印機(jī)*/
            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. 打印

進(jìn)行相關(guān)參數(shù)設(shè)置后（指定打印機(jī)，設(shè)置模板，設(shè)置打印數(shù)據(jù)），將指令通過API傳給打印機(jī)。


    Print: function (arr) {
    var cfgData = new Object;
    cfgData.XAction = "Print"
    cfgData.XOpenId = m_OpenId;
    cfgData.XTokens = m_Tokens;
    /*指定打印機(jī)*/
    cfgData.PrinterName = this.selected;
    /*模板方式，0-客戶端模板，1-遠(yuǎn)程模板，
    2-如果本地模板存在，使用本地，不存在使用遠(yuǎn)程模板，3-不使用模板*/
    cfgData.TemplateMode = "1";
    /*遠(yuǎn)程模板URL或本地模板的文件夾*/
    cfgData.TemplateURL = "http://img.51321.cn/web/chicore/VPrinting/API";
    //cfgData.TemplateURL =  "E:\\臨時(shí)數(shù)據(jù)\\打印\\打印樣本\\API標(biāo)簽?zāi)０?;
    /*模板文件名*/
    cfgData.TemplateName = "Label1-Receipt.Lblx";
    /*打印數(shù)據(jù)的類型，0-數(shù)組，1-Json數(shù)組，元素為JSON對(duì)象，字段：值*/
    cfgData.PrintDataType = 1;
    /*傳遞打印數(shù)據(jù) Json數(shù)組*/ /*內(nèi)容不允許 半角的逗號(hào)及半角的分隔符*/
    cfgData.PrintData = JSON.stringify(arr);
    /*打印 發(fā)送給打印機(jī)進(jìn)行打印*/
    CCPrintingAPI.Excute(cfgData,
    XTimeout => { },
    XFail => {
        this.mytipsmessage = 'API可能未安裝或未啟動(dòng), ' + 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單數(shù)據(jù)，打印1個(gè)訂單票據(jù)。


                    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標(biāo)簽打印機(jī)","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"}
];
                        Print(arr);
                    }

4. 2 打印2單

API傳2單數(shù)據(jù)，打印2個(gè)訂單票據(jù)。


                    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標(biāo)簽打印機(jī)","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"},
{"orderid":"2023030919103002","pname":"HW手機(jī)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單數(shù)據(jù)，打印3個(gè)訂單票據(jù)。


                    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標(biāo)簽打印機(jī)","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"},
{"orderid":"2023030919103002","pname":"HW手機(jī)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 工業(yè)打印機(jī)","orderdate":"2023/03/09 17:18:01","sn":"54115","qty":"8"}
];
                        Print(arr);
                    }

5. 預(yù)覽

進(jìn)行相關(guān)參數(shù)設(shè)置后，獲取單據(jù)的預(yù)覽。


                    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";	
                        /*指定打印機(jī)*/
                        cfgData.PrinterName = this.selected;
                        /*模板方式，0-客戶端模板，1-遠(yuǎn)程模板，
                                    2-如果本地模板存在，使用本地，不存在使用遠(yuǎn)程模板，3-不使用模板*/
                        cfgData.TemplateMode = "1";
                        /*遠(yuǎn)程模板URL或本地模板的文件夾*/
                        cfgData.TemplateURL = "http://img.51321.cn/web/chicore/VPrinting/API";
                        //cfgPrintSettings.TemplateURL =  "E:\\臨時(shí)數(shù)據(jù)\\打印\\打印樣本\\API標(biāo)簽?zāi)０?;
                        /*模板文件名183601-100X100*/
                        cfgData.TemplateName = "Label1-Receipt.Lblx";
                        /*打印數(shù)據(jù)的類型，0-數(shù)組，1-Json數(shù)組，元素為JSON對(duì)象，字段：值*/
                        cfgData.PrintDataType = 1;
                        /*傳遞打印數(shù)據(jù) Json數(shù)組*/ /*內(nèi)容不允許 半角的逗號(hào)及半角的分隔符*/
                        cfgData.PrintData = JSON.stringify(arr);
                        /*打印 發(fā)送給打印機(jī)進(jìn)行打印*/
                        CCPrintingAPI.Excute(cfgData,
                            XTimeout => { },
                            XFail => {
                                this.mytipsmessage = 'API可能未安裝或未啟動(dòng), ' + 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 獲取預(yù)覽

API傳1單數(shù)據(jù)，獲取1單預(yù)覽。


                    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標(biāo)簽打印機(jī)","orderdate":"2023/03/09 18:07:11","sn":"35178","qty":"1"}
];
                        Printpreview(arr);
                    }