Print image using Bluetooth Serial Plugin

luis8 · September 22, 2017, 5:08pm

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 !!

Ravirapolu · October 17, 2017, 5:21am

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.

luis8 · October 19, 2017, 1:42pm

What printer are you using?

Ravirapolu · October 20, 2017, 5:30am

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

luis8 · October 20, 2017, 1:27pm

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

oavtat · March 30, 2018, 12:52pm

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”); });
}

najihah154 · November 9, 2018, 3:08am

are you already know the answer?

test-nikko · November 9, 2018, 4:12am

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

najihah154 · November 10, 2018, 5:00pm

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

test-nikko · November 12, 2018, 9:45am

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));

najihah154 · November 12, 2018, 9:53am

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);
    });
}

test-nikko · November 12, 2018, 11:30am

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.

najihah154 · November 12, 2018, 1:09pm

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

test-nikko · November 13, 2018, 2:03am

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

najihah154 · November 13, 2018, 5:10am

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/>

<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/>

</ion-content>

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

/**

Generated class for the TestPage page.
See https://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
*/
declare let DatecsPrinter:any;
declare var window: any;

// 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));
		}
	)};
}

}

test-nikko · November 13, 2018, 6:15am

I tried running your code and it works well with me

najihah154 · November 13, 2018, 6:25am

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

test-nikko · November 13, 2018, 6:45am

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

najihah154 · November 13, 2018, 7:12am

21%20PM
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 ?

test-nikko · November 13, 2018, 7:16am

I only run the following command

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