Print image using Bluetooth Serial Plugin


#1

I can print text successfully using Bluetooth Serial Plugin, but I need to print an image, someone knows how to do it with this or another plugin !!


#2

Hi, iam unable to print text using bluetooth serial plugin. Can you please share me the sample code to print some text. iam able to connect to bluetooth printer but when i use

bluetoothSerial.write(“hello”,succe,error)

i unable to print any thing. Its urgent can you please share and send me the steps that you follow.


#3

What printer are you using?


#4

Thanks for reply. Iam using visiontek 97BT printer. With that iam able to connect to printer but sample hello world text is not getting. Can you please help me and can you share me sample code you have done. Here is the printer details link
http://www.visiontek.co.in/transaction-terminals/97bt.html

Thanks in advance


#5

The printers interpret a language, you must investigate which language you interpret the one you use I use ZPL this code prints a bar code.

  var CHAR_ESC = 0x1b; var LINE_FEED = '\n'; var CARRIAGE_RETURN = '\r';
    var datos = "! 0 50 200 500 1" + CARRIAGE_RETURN + LINE_FEED +
    "B PDF-417 10 20 XD 3 YD 12 C 3 S 2" + CARRIAGE_RETURN + LINE_FEED +
    "PDF Data"+ CARRIAGE_RETURN + LINE_FEED +
    c + CARRIAGE_RETURN + LINE_FEED +
    "ENDPDF" + CARRIAGE_RETURN + LINE_FEED +
    "PRINT" + CARRIAGE_RETURN + LINE_FEED;        
    this.BluetoothSerial.write(datos);
    this.BluetoothSerial.write("\r\n");

is a kind of programming language


#6

Follow these 3 steps…
1-Find bluetooth devices
2-Connect the device with its id
3-Print

devices = [];
btnFindDevices() {
this.bluetoothSerial.isEnabled().then(() => {
this.bluetoothSerial.discoverUnpaired().then((allDevices) => {
this.devices = allDevices;
console.log(allDevices);
});
});
}

btnBlueToothConnect() {
if (this.devices.length > 0) {
//this code connects device which’s position is 0. Change it whatever you want.
this.bluetoothSerial.connect(this.devices[0].id).subscribe((data) => {
console.log(“Connected”, data);
}, (error) => {
console.log(“not Connected”, error);
});
}
else {
console.log(“Device List did not genereted yet.”);
}
}

btnBlueToothPrint() {
//Attention… Bluetooth printer prints data when whole line filled. For example in my case printer is 32 colon,
//“hello world” has 11 characters. so it prints after 3 times clicked the print button.
this.bluetoothSerial.write(‘hello world’).then(() => { console.log(“s”); }, () => { console.log(“f”); });
}


#7

are you already know the answer?


#8

I am able to print image using the plugin DatecsPrinter. What I did is to convert the image into base64.


#9

are using ionic3? i have problem where it keep saying that DatecsPrinter is undefined… may i know how u declare it… btw thanks for the reply


#10

Yes, I am using ionic 3. I used the declaration of window and access through that

declare var window: any;

and access something like this

window.DatecsPrinter.connect(printerAddress, () => {
	window.DatecsPrinter.printImage(base64Img.replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, ""), 200, 200, 1,  () => {
		resolve(true);
	}, (err) => { resolve(false); })},
	(err) => reject(null));

#11

thanks! it solves the problem before… but now it says that


am i missing something here ?

declare let DatecsPrinter:any;
declare var window: any;

@IonicPage()
@Component({
selector: ‘page-test’,
templateUrl: ‘test.html’,
})
export class TestPage {
DatecsPrinter: any;
public printerslist;
public status = “Failure”;
public feedlines:Number = 1;

constructor(public navCtrl: NavController) {
	this.getPrintersList();
	//this.connectDevice();
	//this.printSampleText();
}


public listBluetoothDevices(){
	return new Promise((resolve, reject) => {
	    window.DatecsPrinter.listBluetoothDevices(
	      function (success) {
	        resolve(success);
	      },
	      function (error) {
	        reject(error);
	      });          
	});
}
getPrintersList(){
	this.printerslist = [];
	this.status = "";
	this.listBluetoothDevices().then(result => {
		this.printerslist = result;
		this.status = "Success";
    }).catch(err => {
		console.log(err);
    });
}

#12

I tried running your code and it seems to work fine. Did you run it on actual device or just in browser? Just so you know you need to run it on an actual device because it uses the native capabilities of the device.


#13

i already tried running on actual device but it shows nothing… is it can be used for any kind of Bluetooth printers?


#14

I think you actually need to pair the printer first to your device before it appears on the list


#15

i already pair the printer to my device but it still shows nothing… and if i console.log it says that


this is my html

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

The world is your oyster.

<p>

If you get lost, the <a href=“http://ionicframework.com/docs/v2”>docs</a> will be your guide.

</p>

<button ion-button (click)=“getPrintersList()”>List Devices</button>

<p>Printer Details : {{ printerslist | json }}</p>

<p>Status : {{ status }}</p>

<ion-input type=“text” [(ngModel)]=“feedlines”></ion-input>

<br/>

<button ion-button (click)=“connectDevice()” block>Connect Device</button>

<br/>

<button ion-button (click)=“printText(’ <h1>Hello World</h1> \n Break line \n New Characters \n \n \n \n’)” block>Print</button>

<br/>

<button ion-button (click)=“provideFeed(feedlines)” full>Feed</button>

<br/>

<button ion-button (click)=“printBarcode()” full>Print Barcode</button>

<br/>

<button ion-button (click)=“print2DBarcode()” full>Print 2D Barcode</button>

<br/>

<button ion-button (click)=“printPage()” full>Print Page</button>

<br/>

<button ion-button (click)=“printMyImage()” full>Print Image</button>

<br/>

<img src=“assets/imgs/d.jpeg” alt="">

</ion-content>

this is .ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, AlertController } from ‘ionic-angular’;

/**

// declare var listBluetoothDevices:any;
@IonicPage()
@Component({
selector: ‘page-test’,
templateUrl: ‘test.html’,
})
export class TestPage {
// DatecsPrinter: any;
// public printerslist:any=;
// public status = “Failure”;
// public feedlines:Number = 1;
// success:any;
// failure:any;
listBluetoothDevices:any=;

DatecsPrinter: any;
public printerslist;
public status = "Failure";
public feedlines:Number = 1;
constructor(public navCtrl: NavController, private alertCtrl:AlertController
) { 
	this.getPrintersList();
	//this.connectDevice();
	//this.printSampleText();
}


listBluetoothDevices1(){
	this.listBluetoothDevices=[];
	return new Promise((resolve, reject) => {
	    window.DatecsPrinter.listBluetoothDevices(
	      function (success) {
	        resolve(success);
	      },
	      function (error) {
	        reject(error);
	      });          
	});

}
getPrintersList(){
	this.printerslist = [];
	this.status = "";
	this.listBluetoothDevices1().then(result => {
		this.printerslist = result;
		this.status = "Success";
    }).catch(err => {
		console.log("ERROR",err);
		let mno=this.alertCtrl.create({
		  title:"ERROR "+err,
		  buttons:['Dismiss']
		});
		mno.present();
	  });
}

connectDevice(){
	alert(this.printerslist[0].address);
	window.DatecsPrinter.connect(this.printerslist[0].address, function (success) {
		alert(JSON.stringify(success));
    }, function (error) {
        alert(JSON.stringify(error));
    });
}

printSampleText(){
    window.DatecsPrinter.printSelfTest( function (success) {
        alert(JSON.stringify(success));
    }, function (error) {
        alert('Error');
    });
}

public printText(text, charset = 'UTF-8'){
	alert(text);
    window.DatecsPrinter.printText( text, charset, function (success) {
    	alert(JSON.stringify(success));
    }, function (error) {
   		alert("error");
    });
}

provideFeed(lines){
	alert(lines)
	window.DatecsPrinter.feedPaper( lines, function (success) {
        alert(JSON.stringify(success));
    }, function (error) {
        alert(JSON.stringify(error));
    });
}

getStatus(){
    window.DatecsPrinter.getStatus( function (success) {
        alert(JSON.stringify(success));
    }, function (error) {
        alert(JSON.stringify(error));
    });
}

printBarcode(data = '1234445775', type = 73 ){
    window.DatecsPrinter.printBarcode( type, data, function (success) {
        this.provideFeed(100);
        alert(JSON.stringify(success));
    }, function (error) {
        alert(JSON.stringify(error));
    });
}

print2DBarcode(data = 'PDF1234445775417', type = 74 ){
    window.DatecsPrinter.printBarcode( type, data, function (success) {
        this.provideFeed(100);
        alert(JSON.stringify(success));
    }, function (error) {
        alert(JSON.stringify(error));
    });
}

public printPage(){
    window.DatecsPrinter.printPage( function (success) {
    	alert(JSON.stringify(success));
    }, function (error) {
    	alert(JSON.stringify(error));
    });
}

printMyImage() {
	var image = new Image();
	image.src = 'assets/imgs/d.jpeg';
	image.onload = function() {
	var canvas = document.createElement('canvas');
	canvas.height = 150;
	canvas.width = 200;
	var context = canvas.getContext('2d');
	context.drawImage(image, 0, 0);
	var imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, ""); //remove mimetype
	window.DatecsPrinter.printImage(
		imageData, //base64
		canvas.width, 
		canvas.height, 
		1, 
	function(success) {
		alert(JSON.stringify(success));
		this.printBarcode();
		this.provideFeed();
		},
	function(error) {
		  alert(JSON.stringify(error));
		}
	)};
}

}


#16

I tried running your code and it works well with me


#17

wow! what kind of printer are you using? it it because it does not compatible with my printer?


#18

It is GOOJPRT MTP-3 Bluetooth Thermal Printer. But I think it is not because your printer is not compatible, I can actually see other devices even if it is not a printer. I tried replicating your error and it is actually you are running it in the browser.

You can try running “ionic cordova run android” to make it work on your device


#19


i already run on my device and already connect printer bluetooth with my device… but still dont get it… can you share how you install the plugin ?


#20

I only run the following command

ionic cordova plugin add https://github.com/giorgiofellipe/cordova-plugin-datecs-printer.git