2

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

有没有人在使用插件时遇到过这种问题？我做错什么了吗 ？我应该安装其他东西来解决问题吗？有没有人有一个运行良好的示例项目？

非常感谢 ！

4

3 回答 3

1

在 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 {}

再次感谢 ！祝你有美好的一天

于 2017-04-28T12:35:43.527 回答
0 
//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 !");
  }
}
于 2017-06-23T21:15:14.470 回答
0

离子cordova插件添加--save isiigo-cordova-plugin-printer

npm install --save @ionic-native/printer

于 2019-07-16T04:01:50.323 回答