web-dev-qa-db-ja.com

印刷PDF in ionic 3

事前定義されたドキュメント定義でPDFを作成するためにPDFMakeを使用しています。私の古いionic 1プロジェクトでは、正常に機能する印刷関数にエンコードされた文字列を渡しています。ここに古いionic 1のコードがあります

var dd = $scope.createDocumentDefinition();
            $timeout(function () {
                var pdf = pdfMake.createPdf(dd);
                pdf.getBase64(function (encodedString) {
                    console.log(encodedString);
                    $ionicLoading.hide();
                    window.plugins.PrintPDF.print({
                        data: encodedString,
                        type: 'Data',
                        title: 'Print Document',
                        success: function () {
                            console.log('success');
                        },
                        error: function (data) {
                            data = JSON.parse(data);
                            console.log('failed: ' + data.error);
                        }
                    });
                });
            }, 1000);

現在、プロジェクトをIonic 3にアップグレードしているため、同じことを試しましたが、出力がここでは異なります。新しいionic 3コードです。プリンタは開いていますが、代わりに私のドキュメント定義に従って印刷すると、エンコードされた文字列のみが印刷されます。

let printer_ = this.printer;
    var dd = this.createDocumentDefinition();
    var pdf = pdfMake.createPdf(dd);
    pdf.getBase64(function (_encodedString) {
      let options: PrintOptions = {
        name: 'MyDocument'
      };
      console.log(JSON.stringify(pdf));
      printer_.print(_encodedString, options).then((msg)=>{
        console.log("Success",msg);
      },(error)  => {
        console.log("Error", error);
      });
  });

これをionic 3で使用する方法はありますか？

ionic-frameworkionic3pdfmake
8
Ionic

pdfmake を使用して、PDFを生成します。

まず、ファイルとファイルオープナーのプラグインをインストールする必要があります。

ionic cordova plugin add cordova-plugin-file-opener2
ionic cordova plugin add cordova-plugin-file

その後、ファイルのNPMパッケージをインストールし、FileOpenerおよびPDF make

npm install pdfmake 
npm install @ionic-native/file-opener 
npm install @ionic-native/file

Src/app.module.tsを開き、ファイルとfileopernerの参照を含めます。

import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';

プロバイダーにファイルとFileOpenerを追加する

providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    File,
    FileOpener
  ]

次のようなテンプレートUIを生成しています。

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic PDF
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label stacked>From</ion-label>
    <ion-input [(ngModel)]="letterObj.from"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>To</ion-label>
    <ion-input [(ngModel)]="letterObj.to"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Text</ion-label>
    <ion-textarea [(ngModel)]="letterObj.text" rows="10"></ion-textarea>
  </ion-item>

  <button ion-button full (click)="createPdf()">Create PDF</button>
  <button ion-button full (click)="downloadPdf()" color="secondary" [disabled]="!pdfObj">Download PDF</button>

</ion-content>

その後、home.component.tsコードは次のようになります。

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  letterObj = {
    to: '',
    from: '',
    text: ''
  }

  pdfObj = null;

  constructor(public navCtrl: NavController, private plt: Platform, private file: File, private fileOpener: FileOpener) { }

  createPdf() {
    var docDefinition = {
      content: [
        { text: 'REMINDER', style: 'header' },
        { text: new Date().toTimeString(), alignment: 'right' },

        { text: 'From', style: 'subheader' },
        { text: this.letterObj.from },

        { text: 'To', style: 'subheader' },
        this.letterObj.to,

        { text: this.letterObj.text, style: 'story', margin: [0, 20, 0, 20] },

        {
          ul: [
            'Bacon',
            'Rips',
            'BBQ',
          ]
        }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {
          italic: true,
          alignment: 'center',
          width: '50%',
        }
      }
    }
    this.pdfObj = pdfMake.createPdf(docDefinition);
  }

  downloadPdf() {
    if (this.plt.is('cordova')) {
      this.pdfObj.getBuffer((buffer) => {
        var blob = new Blob([buffer], { type: 'application/pdf' });

        // Save the PDF to the data Directory of our App
        this.file.writeFile(this.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(fileEntry => {
          // Open the PDf with the correct OS tools
          this.fileOpener.open(this.file.dataDirectory + 'myletter.pdf', 'application/pdf');
        })
      });
    } else {
      // On a browser simply use download!
      this.pdfObj.download();
    }
  }

}
4
ZearaeZ

このレポが役に立つかもしれません： https://github.com/sarahgoldman/cordova-print-pdf-plugin

ionicで使用する場合は、ここにいくつかの指示があります。

コルドバでのPDFファイルの印刷

0
Slimane MEHARZI