Ionic 本机打印机插件无法正常工作
Ionic native Printer plugin not working
(离子 2)
位于此处的插件似乎在 android 和 ios 上对我不起作用:http://ionicframework.com/docs/native/printer/
我认为我遵循了此页面中的指南,代码在两个平台上构建,但我在 ios 上出现黑屏,在 android 上出现空白屏幕,当模拟 ...
首先我开始了一个新项目:ionic start PrinterApp --v2
然后我安装了平台:android 6.2.1, ios 4.3.1
然后插件页面的两个命令行:
ionic plugin add --save de.appplant.cordova.plugin.printer
npm install --save @ionic-native/printer
然后在 home.html 我放一行来激活打印机 :
<button class="button" (click)="print()">Print</button>
最后我的 home.ts 看起来像这样:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Printer, PrintOptions } from '@ionic-native/printer';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private printer: Printer) {
}
print() {
this.printer.isAvailable();
let options: PrintOptions = {
name: 'MyDocument',
duplex: true,
landscape: true,
grayscale: true
};
this.printer.print("http://google.com", options);
}
}
有没有人遇到过这种插件的问题?我做错什么了吗 ?我应该安装其他东西来解决问题吗?
有没有人有运行良好的示例项目?
非常感谢!
在 Suraj 和 Gabriel 的帮助下,我设法解决了这个问题,
我需要转到此页面以获取信息:http://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module
所以输入这一行:npm install @ionic-native/core --save
然后进入我的 App.Module.ts 添加打印机提供商,如下所示:
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Printer, PrintOptions } from '@ionic-native/printer';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
Printer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
再次感谢!
祝你有美好的一天
//Note: First into your App.Module.ts adding printer provider
//Then into Printer Page
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Printer, PrintOptions } from '@ionic-native/printer';
@Component({
selector: 'page-printer-view',
templateUrl: 'printer-view.html'
})
export class PrinterViewPage {
constructor(public navCtrl: NavController, public navParams:
NavParams,
private printer: Printer) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PrinterViewPage');
}
print(){
this.printer.isAvailable().then(this.onSuccessLoad, this.onErrorLoad);
}
onSuccessLoad(){
let options: PrintOptions = {
name: 'MyDocument',
printerId: 'My Printer XYZ',
duplex: true,
landscape: true,
grayscale: true
};
this.printer.print("http://google.com",options).then(this.onSuccessPrint,
this.onErrorPrint);
}
onErrorLoad(){
alert('Error : printing is unavailable on your device ');
}
onSuccessPrint(){
alert("printing done successfully !");
}
onErrorPrint(){
alert("Error while printing !");
}
}
ionic cordova 插件添加 --save isiigo-cordova-plugin-printer
npm install --save @ionic-native/printer
(离子 2) 位于此处的插件似乎在 android 和 ios 上对我不起作用:http://ionicframework.com/docs/native/printer/
我认为我遵循了此页面中的指南,代码在两个平台上构建,但我在 ios 上出现黑屏,在 android 上出现空白屏幕,当模拟 ...
首先我开始了一个新项目:ionic start PrinterApp --v2
然后我安装了平台:android 6.2.1, ios 4.3.1
然后插件页面的两个命令行:
ionic plugin add --save de.appplant.cordova.plugin.printer
npm install --save @ionic-native/printer
然后在 home.html 我放一行来激活打印机 :
<button class="button" (click)="print()">Print</button>
最后我的 home.ts 看起来像这样:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Printer, PrintOptions } from '@ionic-native/printer';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private printer: Printer) {
}
print() {
this.printer.isAvailable();
let options: PrintOptions = {
name: 'MyDocument',
duplex: true,
landscape: true,
grayscale: true
};
this.printer.print("http://google.com", options);
}
}
有没有人遇到过这种插件的问题?我做错什么了吗 ?我应该安装其他东西来解决问题吗? 有没有人有运行良好的示例项目?
非常感谢!
在 Suraj 和 Gabriel 的帮助下,我设法解决了这个问题, 我需要转到此页面以获取信息:http://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module
所以输入这一行:npm install @ionic-native/core --save
然后进入我的 App.Module.ts 添加打印机提供商,如下所示:
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Printer, PrintOptions } from '@ionic-native/printer';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
Printer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
再次感谢! 祝你有美好的一天
//Note: First into your App.Module.ts adding printer provider
//Then into Printer Page
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Printer, PrintOptions } from '@ionic-native/printer';
@Component({
selector: 'page-printer-view',
templateUrl: 'printer-view.html'
})
export class PrinterViewPage {
constructor(public navCtrl: NavController, public navParams:
NavParams,
private printer: Printer) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad PrinterViewPage');
}
print(){
this.printer.isAvailable().then(this.onSuccessLoad, this.onErrorLoad);
}
onSuccessLoad(){
let options: PrintOptions = {
name: 'MyDocument',
printerId: 'My Printer XYZ',
duplex: true,
landscape: true,
grayscale: true
};
this.printer.print("http://google.com",options).then(this.onSuccessPrint,
this.onErrorPrint);
}
onErrorLoad(){
alert('Error : printing is unavailable on your device ');
}
onSuccessPrint(){
alert("printing done successfully !");
}
onErrorPrint(){
alert("Error while printing !");
}
}
ionic cordova 插件添加 --save isiigo-cordova-plugin-printer
npm install --save @ionic-native/printer