PDFmake Ionic App 不在设备上创建 PDF答案

【问题标题】：PDFmake Ionic App not creating PDF on devicePDFmake Ionic App 不在设备上创建 PDF
【发布时间】：2016-03-17 12:55:37
【问题描述】：

我正在开发一个 Ionic 应用程序，目的是生成一个由用户信息表填充的 PDF。我通过使用 PDFmake.org 来做到这一点

我已经使用 ionic serve 测试了该应用程序，它在使用时生成了我想要的完美 PDF。

问题是，当我构建应用程序并在我的 android 设备上对其进行测试时，应用程序没有生成 PDF。我尝试了pdfMake.createPdf(docDefinition).open(); 和pdfMake.createPdf(docDefinition).download('optionalName.pdf');，但在我的设备上没有任何效果。关于我可以做些什么来解决这个问题或我做错了什么的任何想法？

PDF生成的完整代码如下：

$scope.people = [{
    forename: "Adam",
    surname: "Wilson",
    email: "adam.wilson@gmail.com",
    photo: " <base64 image code> "
}, {
    forename: "Kyle",
    surname: "Ryder",
    email: "kyle.ryder@gmail.com",
    photo: " <base64 image code> "
}, {
    forename: "Blake",
    surname: "Hunter",
    email: "blake.hunter@gmail.com",
    photo: "<base64 image code> "
}];

$scope.PDFBody = [];

$scope.generatePDF = function () {
    $scope.PDFBody.push([ 'Picture', 'Forename', 'Surname', 'Email Address', 'Signature' ]);
    for (i = 0; i < $scope.people.length; i++) {
        $scope.PDFBody.push([ {image: 'data:image/jpeg;base64,' + $scope.people[i].photo, width: 75}, $scope.people[i].forename, $scope.people[i].surname, $scope.people[i].email, '' ]);
    }
    var docDefinition = {
        pageSize: 'A4',
        pageOrientation: 'portrait',
        pageMargins: [ 40, 40, 40, 40 ],
        content: [
            {
                table: {
                    headerRows: 1,
                    widths: [ 75, 75, 75, 140, 100 ],
                    body: $scope.PDFBody
                }
            }
        ]
    }
    /*for (i = 0; i < $scope.people.length; i++) {
        docDefinition.content[0].table.body += ",[ {image: 'data:image/jpeg;base64," + $scope.people[i].photo + "', width: 200}, " + $scope.people[i].forename + ", " + $scope.people[i].surname + ", " + $scope.people[i].email + ", '' ]";
    }*/
    var number = 0;
    console.log(docDefinition);
    number = $localstorage.get('PDFnum');
    if (!isNaN(number)) {
        console.log("Pass");
        number++;
    } else {
        number = 1;
    }
    $localstorage.set('PDFnum', number);
    var docname = 'regDoc' + number + '.pdf';
    pdfMake.createPdf(docDefinition).open();
    //pdfMake.createPdf(docDefinition).download(docname);
}

【问题讨论】：

标签： android angularjs pdf ionic-framework pdf-generation

【解决方案1】：

要在设备上获取 PDF，您需要使用 PdfMake、Cordova File Opener 2 和 Cordova File 插件执行类似操作：

getPdf() {
        let dd = null;
        dd = this.createDocumentDefinition();

         pdfMake.createPdf(dd).getBuffer((buffer) => {
         var utf8 = new Uint8Array(buffer); // Convert to UTF-8...
         let binaryArray = utf8.buffer; // Convert to Binary...

         let fileName = "file.pdf";
         let saveDir = cordova.file.externalApplicationStorageDirectory;

           File.createFile(saveDir, fileName, true).then((fileEntry) => {
             fileEntry.createWriter((fileWriter) => {
                 fileWriter.onwriteend = () => {
                   let toast = Toast.create({
                     message: 'PDF gerado com sucesso! Abrindo arquivo...',
                     duration: 2000,
                     position: 'middle'
                   });
                   toast.onDismiss(() => {
                     cordova.plugins.fileOpener2.open(
                       saveDir+fileName,
                       'application/pdf');
                   });
                   this.navController.present(toast);
                 };
                 fileWriter.onerror = (e) => {
                     console.log('file writer - error event fired: ' + e.toString());
                 };
                 fileWriter.write(binaryArray);
             });
           });
         });
  }

【讨论】：