La génération de fichiers PDF avec Ionique cadre

Bon, c'est une réponse plus détaillée que fournit l'exemple que j'ai mentionné dans ma première réponse. J'ai un repo github:

https://github.com/jeffleus/ionic-pdf

et une ligne de github.io exemple:

https://jeffleus.github.io/ionic-pdf/www/#/.

Tout d'abord, j'ai créé un ReportBuilderSvc qui est utilisé pour générer le rapport réel de la déclaration dans le format JSON utilisé par pdfMake.org. Ce processus sera spécifiques à l'application, j'ai donc généré cela comme un service distinct. Vous pouvez voir mon exemple de code et jouer autour de w/votre propre définition du document sur la pdfMake.org site web. Une fois que vous avez une conception de rapport, placez votre propre définition du document JSON dans le _generateReport méthode.

Ensuite, j'ai emballé pdfMake.org bibliothèque en un gratuit angulaire de service, nommé ReportSvc. Cela demande du public generateReport() la méthode de la ReportBuilderSvc pour obtenir le reportDefinition JSON. Je me suis cassé le processus de génération du rapport en $q promesse gainé de méthodes internes pour permettre au service d'émettre des événements de progression que le client peut consommer pour la mise à jour de l'INTERFACE utilisateur. Sur les anciens lent, iPhone 4 dispositifs j'ai vu le rapport du processus autant que 30 à 45 secondes. Cette capacité de mise à jour de l'INTERFACE utilisateur est très important, sinon l'application dirait qu'il a gelé.

Le wrapper rompt le processus dans:

1. generateReportDef --> : ReportBuilderSvc : JSON rpt objet
2. generateReportDoc --> : JSON doc def : pdfDoc objet
3. generateReportBuffer --> : pdfDoc objet : tampon[]
4. generateReportBlob --> : tampon [] : objet Blob
5. saveFile --> : objet Blob : chemin du fichier de rapport

À chaque étape, le service transmet un événement sur l' $rootScope à l'aide de la fonction d'utilité:

function showLoading(msg) {
    $rootScope.$broadcast('ReportSvc::Progress', msg);
}

Cela permet aux clients de "s'abonner" dans le contrôleur ou la consommation de code avec:

$scope.$on('ReportSvc::Progress', function(event, msg) {
    _showLoading(msg);
});

Et enfin, pour afficher le pdf, j'utilise une iframe et définir la src w/générée dataURI pour la démo en ligne dans le navigateur. Et, j'utilise le InAppBrowser et locales fichier créé lors de l'exécution sur le périphérique ou l'émulateur. J'ai l'intention de nettoyer un peu plus, de sorte qu'il peut être inclus en tant que bibliothèque et injecté dans angulaire de service. Cela permettra de laisser le client libre d'assister le rapport de la déclaration de w/un en toute sécurité enveloppé angulaire/ionique service.

Toutes les pensées sont appréciés comme je suis nouveau sur le nœud, angulaire, monde ionique et peut certainement utiliser l'aide aussi...

OriginalL'auteur Jeff L

Cet article de blog peut vous aider. Il montre comment créer un fichier PDF: http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/

Maintenant enregistrer le fichier (à l'aide de ng-cordoue) comme je l'ai commenté le post de suivre ces étapes:

pdfMake.createPdf(dd).getBuffer(function (buffer) {
    var utf8 = new Uint8Array(buffer); //Convert to UTF-8... 
    binaryArray = utf8.buffer; //Convert to Binary...
    $cordovaFile.writeFile(cordova.file.dataDirectory, "example.pdf", binaryArray, true)
        .then(function (success) {
            console.log("pdf created");
        }, function (error) {
            console.log("error");
    });
});

Ce fichier est enregistré en tant que "exemple.pdf" dans votre répertoire de données

OriginalL'auteur sohel101091