&

Vue API 打印圖片不使用模板- CCPrintingAPI Vue js 打印API接口,,vue print,vue靜默打印,vue打印,vue實現打印,web 打印, js打印, js 打印, Javascript 打印, js 靜默打印,js 不預覽打印,瀏覽器打印,js標簽打印,js單據打印,打印圖片,vue 打印圖片,js 打印圖片 ,CCPrintingAPI for Vue 打印API接口, 不使用模板，打印圖片，打印范例代碼，js標簽打印，條碼，二維碼標簽，js單據打印，很容易集成。

適配

150+

品牌，

8000+

型號打印機

支持熱敏/熱轉印標簽、票據打印機，激光、噴墨、針式打印機

CCPrintingAPI

更好用、更通用的打印機 API 開發接口

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

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

UniApp, 小程序, HTTP POST 接口

購開發接口專用版（特定打印機使用）

購開發接口通用版（不限打印機型號）

詳情咨詢微信客服

通用版(不含打印機)

不限打印機型號

適配標簽機激光噴墨針式

專用版(含打印機)

ZPX5020t

熱轉印 200dpi

專用版(含打印機)

ZPX5030t

熱轉印 300dpi

CCPrintingAPI

概述

功能特性

商業授權

配備CCPrintingAPI的標簽打印機

更優惠

多臺并行打印

視頻

多臺并行打印(ChicoreDriver)

CCPrintingAPI 使用手冊

模板設計

Vue Javascript

Javascript

Java

Python

VB 6.0/VBScript

C/C++

打印機

ChicoreDriver

DY200t

DY300t

DY600t

鏈接

視頻號教程

微信客服

Vue 打印圖片

無模板

Vue 打印機開發接口,不使用模板，直接打印圖片，通過Vue調用CCPrintingAPI打印機接口API,不提前設計模板，進行圖片打印。

獲取打印機列表打印預覽

1. Vue項目中,引入 CCPrintingAPI.min.vue.js

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

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

2. 如何獲取打印機列表

獲取計算機上安裝的所有打印機, 在調用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];
        }
    }
    );
    }

3. 使用Json構建打印模板

進行相關參數設置后（指定打印機，設置模板，設置打印數據），將指令通過API傳給打印機。


                    GetSelfDraw:function(){
                        var selfdraw = {
                                "Image":
                                [
                                    {
                                    "Name" : "Image1" ,
                                    "LabelType" : "1" ,
                                    "X" : "0" ,
                                    "Y" : "0" ,
                                    "Width" : "50" ,
                                    "Height" : "30" ,
                                    "Data" : "" ,
                                    "IsBind" : "1" ,
                                    "BindField" : "Field1" ,
                                    "Embed" : "" ,
                                    "IsToFront" : "0" ,
                                    "IsThird" : "0" ,
                                    "ImageColor" : "0" ,
                                    "RotateOrientation" : "0" ,
                                    "KeepRatio" : "1" ,
                                    "Visible" : "1"
                                    }
                                ],

                                "PageSettings":
                                {
                                    "Width" : "52" ,
                                    "Height" : "30" ,
                                    "TopMargin" : "0" ,
                                    "BottomMargin" : "0" ,
                                    "LeftMargin" : "1" ,
                                    "RightMargin" : "0" ,
                                    "PrinterPaperAutoSet" : "1" ,
                                    "UseQuickSetTool" : "1" ,
                                    "Landscape" : "0" 
                                },

                                "LabelDetail":
                                {
                                    "Width" : "50" ,
                                    "Height" : "30" ,
                                    "RowSpan" : "2" ,
                                    "ColumnSpan" : "2" ,
                                    "Visible" : "1"
                                },

                                "DataBase":
                                {
                                    "FieldNumbers" : "15" ,
                                    "FieldNames":
                                    [
                                    ]
                                }
                            };
                        return JSON.stringify(selfdraw);
                    }

4. 打印

進行相關參數設置后（指定打印機，設置模板，設置打印數據），將指令通過API傳給打印機。


    Print: function () {
    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 = "3";
                        cfgData.SelfDraw = this.GetSelfDraw();
                        /*打印數據的類型，0-數組，1-Json數組，元素為JSON對象，字段：值*/
                        cfgData.PrintDataType = 1;
                        /*傳遞打印數據 Json數組*/ /*內容不允許 半角的逗號及半角的分隔符*/
                        var arr = [
                            { Field1: 'http://img.51321.cn/web/chicore/VPrinting/API/Image/2315002468301572.jpg'}
                        ];
    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];
        }
    }
    );
    }

<strike id="i5mkf"></strike>

<table id="i5mkf"></table>