&

Vue 打印快速上手- 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 ,CCPrintingAPI for Vue 打印API接口, Vue js 打印接口快速上手，打印范例代碼，js標(biāo)簽打印，條碼，二維碼標(biāo)簽，js單據(jù)打印，很容易集成。

適配

150+

品牌，

8000+

型號打印機(jī)

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

CCPrintingAPI

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

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

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

UniApp, 小程序, HTTP POST 接口

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

購開發(fā)接口通用版（不限打印機(jī)型號）

詳情咨詢微信客服

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

不限打印機(jī)型號

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

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

ZPX5020t

熱轉(zhuǎn)印 200dpi

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

ZPX5030t

熱轉(zhuǎn)印 300dpi

CCPrintingAPI

概述

功能特性

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

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

更優(yōu)惠

多臺并行打印

視頻

多臺并行打印(ChicoreDriver)

視頻

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

含專用API

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

含專用API

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

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

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

Vue Javascript

Vue 打印快速上手

Vue API for

ChicoreDriver

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

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

Javascript

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

無模板

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

Java

Python

VB 6.0/VBScript

C/C++

打印機(jī)

ChicoreDriver

DY200t

DY300t

DY600t

鏈接

視頻號教程

微信客服

快速上手

Vue

Vue 打印機(jī)開發(fā)接口,快速上手，通過Vue調(diào)用CCPrintingAPI打印機(jī)接口API,Vue 瀏覽器Web前端打印。

獲取打印機(jī)列表打印預(yù)覽

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

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

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

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ī)，可以直接使用訂購時(shí)的免驅(qū)打印機(jī)名稱，不用安裝驅(qū)動，也無需使用此代碼獲取打印機(jī)列表。


    GetPrinters: function () {
    var cfgData = new Object;
    cfgData.XAction = "Printers";
    cfgData.XOpenId = m_OpenId;
    cfgData.XTokens = m_Tokens;
    cfgData.XUrl = 'http://127.0.0.1:8086';     
    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);
            }
            /*設(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 () {
    var cfgData = new Object;
    cfgData.XAction = "Print"
    cfgData.XOpenId = m_OpenId;
    cfgData.XTokens = m_Tokens;
    cfgData.XUrl = 'http://127.0.0.1:8086';    
    /*指定打印機(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 = "183601-70X40.Lblx";
    /*打印數(shù)據(jù)的類型，0-數(shù)組，1-Json數(shù)組，元素為JSON對象，字段：值*/
    cfgData.PrintDataType = 1;
    /*傳遞打印數(shù)據(jù) Json數(shù)組*/ /*內(nèi)容不允許 半角的逗號及半角的分隔符*/
    var arr = [
    { sku: 'OBJ100001', name: '測試1', kw: 'D12-1', bh: 'RKD123451' },
    { sku: 'OBJ100002', name: '測試2', kw: 'D12-2', bh: 'RKD123452' },
    { sku: 'OBJ100003', name: '測試3', kw: 'D12-3', bh: 'RKD123453' },
    ];
    cfgData.PrintData = JSON.stringify(arr);
    /*打印 發(fā)送給打印機(jī)進(jìn)行打印*/
    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];
        }
    }
    );
    }

5. 預(yù)覽

進(jìn)行相關(guān)參數(shù)設(shè)置后（指定打印機(jī)，設(shè)置模板，設(shè)置打印數(shù)據(jù)），獲取標(biāo)簽的預(yù)覽圖像。


                    Printpreview: function () {
                        this.myhid = '';
                        this.mytipsmessage = '';
                        this.timetick = '';
                        var cfgData = new Object;
                        cfgData.XAction = "Print"
                        cfgData.XOpenId = m_OpenId;
                        cfgData.XTokens = m_Tokens;
                        cfgData.XUrl = 'http://127.0.0.1:8086';     
                        /*該參數(shù)為 3 時(shí)，獲取標(biāo)簽的預(yù)覽圖像*/
                        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 = "183601-70X40.Lblx";
                        /*打印數(shù)據(jù)的類型，0-數(shù)組，1-Json數(shù)組，元素為JSON對象，字段：值*/
                        cfgData.PrintDataType = 1;
                        /*傳遞打印數(shù)據(jù) Json數(shù)組*/ /*內(nèi)容不允許 半角的逗號及半角的分隔符*/
                        var arr = [
                            { sku: 'OBJ100001', name: '測試1', kw: 'D12-1', bh: 'RKD123451' },
                            { sku: 'OBJ100002', name: '測試2', kw: 'D12-2', bh: 'RKD123452' },
                            { sku: 'OBJ100003', name: '測試3', kw: 'D12-3', bh: 'RKD123453' },
                        ];
                        cfgData.PrintData = JSON.stringify(arr);
                        /*打印 發(fā)送給打印機(jī)進(jìn)行打印*/
                        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];
                                }
                            }
                        );
                    }
                }