vue-zpl-img/README.md

One can render based on VUE, which can generate IMG and ZPL print instructions from local HTML templates CSS templates

# VueJs2ImgAndZPLPrinter

VueJs2ImgAndZPLPrinter,Can use in Vue2 and JSDomOptions,Change HTML to ZPL or IMG

# This is a module that converts front-end HTML into ZPL and images

use this you need install and import node modle Vue2.0,axios,pako (zlib)

Cooperate with the backend to resolve Fastreport .frx Files ,then send HTML and CSS file to FontEnd,
It renders useful HTML into image data (Base64) and standard ZPL to printer.

If you have any good suggestions, Please submit :)
BUGS EMAIL CharryLinGen@outlook.com

version 1.0.0 +

parameter

TemplateName(the frx backend filesname send this to backend.) printData(not support frxParmeter now is only C# DataTable)
\_PrintIP （printer HTTP IP）

```
printData [1,2,3....]

PrinterOpts{
	blackAndWhite
	rotate
	notrim
	qrcodeScale
	DPI
	PaddingX
	PaddingY
	PrinterIP
}
PostOpts{
	TemplateName
	axios
	PostURL
}
either-or
HTMLOpts{
	HTML
	CSS
	QRcodeParm
}

other
 * @param {Array} _CallBackBase64
 * @param {Array} _CallBackZPL
 * @param {object} _CallPressor
 * @param {function} CallBackFunction
```

\_CallBackBase64 \_CallBackZPL \_CallPressor and CallBackFunction

Axios requests are currently embedded to help you read a CSS and HTML from the backend.
if your dont like this Axios ,You need to pass in your own CSS and HTML

# USE

```javascript
npm install vue-zpl-img


/*axios post example*/
vue-zpl-img({
		PostOpts:{
		  TemplateName:"TemplateName", 						// post to backend
		  axios, 								// You encapsulate Axios
		  PostURL:"http://api/?", 					        // You encapsulate backend api
		},
		printData: [{code:001},{code:002}....],				        // Batch render array
		PrinterOpts:{
				PrinterIP:"http://192.168.0.1"				// ZPL printer IP
		},
		_CallBackBase64: this.handlePrintData.previewImgList,  			// static golobal array,Add images dynamicall
		_CallBackZPL: this.handlePrintData.previewZPL, 				// static golobal array,Add ZPL dynamicall

		_CallPressor:{this._CallPressor}, 					// Dynamically increasing progress also static golobal

		CallBackFunction:(res)={         					// All batch render finished data
			res.CallBackBase64
			res.CallBackZPL
		}
	  })

/*Independent HTML CSS passed in example*/

const HTMLstr = '<div class = "s1" :style='QRcodeBase64' id=\"QRcodeDom\">{{code}}<div><div>{{name}}</div> '
// NOTICE! :style='QRcodeBase64' id=\"QRcodeDom\"  It must be fixed that it will affect VUE rendering !
const CSSstr ='.s1{background : #fff;width :50px;height :50px;}'

vue-zpl-img({
		HTMLOpts:{
		  HTML:HTMLstr,
		  CSS:CSSstr,
		  QRcodeParm:"code", 							 // if you need QRcode, Only one at the moment
		},
		printData: [{code:001,name:'page1'},{code:002,name:'page2'}....],
		PrinterOpts:{
				PrinterIP:"http://192.168.0.1"
		},
		_CallBackBase64: this.handlePrintData.previewImgList,
		_CallBackZPL: this.handlePrintData.previewZPL,

		_CallPressor:{this._CallPressor},

		CallBackFunction:(res)={
			res.CallBackBase64
			res.CallBackZPL
		}
	  })


```