以离子3

时间:2018-08-13 08:56:25

标签: ionic-framework ionic3 pdfmake

我正在使用PDFMake使用预定义的文档定义创建pdf。在我的旧的ionic 1项目中,我将编码的字符串传递给可以正常工作的print函数。这是旧离子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中使用它?

2 个答案:

答案 0 :(得分:4)

您可以使用pdfmake使用离子型生成PDF。

首先,您需要安装用于文件和文件打开器的插件。

<select class="category" name="savingbal" id="savingbal">

安装文件,FileOpener和PDF make的NPM软件包后

onsubmit

打开您的src / app.module.ts并包含文件和文件操作员参考:

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

在提供程序中添加文件和FileOpener

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

我正在生成一个模板UI,如下所示:

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

之后,您的home.component.ts代码如下所示:

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

答案 1 :(得分:0)

此回购是否有用: https://github.com/sarahgoldman/cordova-print-pdf-plugin

有关将其与离子结合使用的信息,您可以在此处找到一些说明:

Printing pdf file in cordova