Exportation de contenu de page angulaire au format PDF à l'aide de Kendo UI

Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular

Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.

L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire. Nous espérons que vous apprécierez le post!

Dans ce tutoriel, découvrez comment exporter facilement des pages de contenu HTML dans votre application Angular. Cela devrait être une tâche complexe, mais grâce à un composant de Kendo UI, cela est facile.

Si vous êtes à la recherche d'une solution simple pour exporter en douceur le contenu HTML de votre application Angular vers un fichier PDF, alors ceci est le post approprié pour vous. Il se peut que nous devions exporter du contenu HTML au format PDF pour plusieurs raisons, allant du partage avec d’autres sans avoir nécessairement accès à Internet à la sauvegarde uniquement à des fins de documentation.

La création d’une solution pour un composant de ce type peut prendre beaucoup de temps. construisons tout seul. Dans cet article, je vais vous montrer comment y parvenir facilement en utilisant le composant d'exportation PDF fourni par Kendo UI .

Nous allons créer une application Angular avec du contenu factice et ajouter un bouton Kendo UI à exporter le contenu directement au format PDF comme indiqué ici:

Avant de créer une application angulaire, vous devez d'abord installer l'interface de ligne de commande angulaire si elle n'existe pas déjà sur votre ordinateur. Ouvrez un terminal et exécutez la commande suivante à cette fin:

 npm [19659015] installer  -g @ angular / cli

La CLI angulaire sera ajoutée globalement à votre machine.

Création d'une application angulaire

Vous pouvez maintenant créer une nouvelle application à cette fin en exécutant la commande ci-dessous pour générer une application portant le nom. kendo-angular-export-pdf :

 nouvelle édition de kendo-angular-export-pdf

Une fois le processus d'installation terminé, changez de répertoire dans le projet nouvellement créé, comme indiqué ci-dessous, puis démarrez l'application:

 // change de répertoire.
 cd  kendo-angular-export-pdf
    
// lance l'application
ng servir

Vous pouvez rencontrer une erreur avec le message ci-dessous dans votre console:

 ERREUR dans node_modules / rxjs / internal / types.d.ts (81,44): erreur TS1005: ';' attendu.
node_modules / rxjs / internal / types.d.ts (81,74): erreur TS1005: ';' attendu.
node_modules / rxjs / internal / types.d.ts (81,77): erreur TS1109: expression attendue.

Ceci est un problème connu sur GitHub et est dû à un manque de compatibilité entre la version actuelle de TypeScript sur votre machine et rxjs . La solution rapide consiste à supprimer le dossier node_modules . Ouvrez maintenant le fichier package.json et dans l’objet dependencies, modifiez les rxjs en supprimant ^ :

   "dépendances" :   {
    . ... 
     "rxjs" :   "6.0.0"  
     "zone.js" :   "^ 0.8.26" 
  } 

Enregistrez le fichier et exécutez à nouveau la commande npm install . Une fois le processus d'installation terminé, vous pouvez maintenant lancer l'application avec ng serve .

Ceci compilera votre application et démarrera le serveur de développement. Pour afficher la page par défaut de cette application angulaire, accédez à http: // localhost: 4200 à partir de votre navigateur préféré et vous verrez ceci:

Nous devrons ensuite ajouter le composant d’exportation PDF avant de commencer à l’utiliser dans notre application, pour ce faire, nous utiliserons la commande ng add pour exiger et installer le paquet comme indiqué ici:

 ng add @ progress / kendo-angular-pdf-export

Ceci importera et ajoutera les deux PDFExportModule et BrowserAnimationsModule à app.module.ts fichier:

    
 import   [. BrowserModule }   de   '@ angular / platform-browser' ; 
 import   { NgModule }   de   '@ angular / core '; 
 import   { AppComponent }   de  ' ./ app.component '; 
 import   { PDFExportModule }   de   '@ progress / kendo-angular-pdf-export' ; 
 import   { de BrowserAnimationsModule ].   de   '@ angular / platform-browser / animations' ; 
    
    
@  NgModule  ( {
  déclarations :   [
    AppComponent
  ] 
  importations :   [
    NavigateurModule 
    PDFExportModule 
    NavigateurAnimationsModule
  ] 
  fournisseurs :   [] 
  bootstrap :   [ AppComponent ] 
} ) 
 export   class   AppModule   { } 

Utilisez l ' Composant d'exportation Kendo PDF

Après avoir installé le package d'exportation PDF, vous pouvez désormais exporter le contenu de notre application Angular au format PDF en le plaçant dans le composant . Ouvrez ./ src / app / app.component.html et remplacez son contenu par:

 // ./src/app/app.component.html
    
 < div   class  =  " pageWrapper "  >  
   < div   class  =  " content "  >  
     < kendo-pdf-export   #pdf >  
       < div   class  =  " taille-a4 "  > 
          < p  p  ]>   Créez plus rapidement de meilleures applications JavaScript. La collection ultime de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery,
          Angular, React et Vue. Créez rapidement des applications Web réactives attrayantes et performantes, quel que soit votre choix.
          de votre choix de framework JavaScript.
         </  p > 
          < p >   Créez de meilleures applications JavaScript plus rapidement La collection finale de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery,
          Angular, React et Vue. Créez rapidement des applications Web réactives attrayantes et performantes, quel que soit votre choix.
          de votre choix de framework JavaScript.
         </  p >  
       </  div >  
     </  kendo-pdf-export >  
    
     < div >  
       < button   kendo-button   (cliquez)  =  " pdf.saveAs ( ' demo-content.pdf  ')  " > 
         Exportation au format PDF
       </  bouton >  
     </  div >  
   </  div >  
 </  div >  

Ici, nous avons ajouté un contenu factice et l'avons enveloppé avec le composant . Ensuite, nous avons ajouté un bouton et y avons associé un événement de clic. Une fois le bouton cliqué, nous avons appelé la méthode saveAs () afin de sauvegarder le fichier généré. Le fichier sera enregistré sous le nom transmis en tant qu'argument à la méthode saveAs () .

Enfin, pour donner à la page un style par défaut, ajoutez le contenu suivant à ./ src / app / app.component.css fichier:

 // ./src/app/app[19459048HERComponentcss
    
.pageWrapper  {
   margin-top [19659026]:   50  px ; 
} 
 button  {
     rembourrage :   15  px ; 
 } 
 kendo-pdf-export  {
   famille de polices :   "DejaVu Sans"  "Arial" sans serif  
   taille de la police :   16  px ; 
} 
  .content   {
   width :   800  px ; 
   marge :   0  auto ; 
   hauteur de ligne :   20  20 ; 
} [1 9459014]

Maintenant, lancez à nouveau l’application en exécutant ng serve à partir du terminal situé dans le répertoire de l’application. Une fois que l'application est créée et diffusée sur http: // localhost: 4200, vous verrez ceci:

Le contenu affiché ici provient de notre page angulaire. Pour tester la fonctionnalité d’exportation de contenu HTML, cliquez sur le bouton Kendo avec le texte Exporter en PDF . Ouvrez maintenant le fichier PDF téléchargé:

s_81E46396DEFFD38445F7E8FA8EAADC7D2B1715FB305BCCD31D69688D8754CDF6_1552411333111_downloaded-pdf-kendo "/>

Cool, non? Ceci est le contenu de notre page exportée au format PDF sans trop de soucis. Mais en regardant de près le fichier PDF, vous conviendrez avec moi que quelque chose ne va pas. Le contenu ne semble pas organisé correctement. Nous allons changer cela en ajoutant un peu de marge dans la section suivante.

Ajouter une taille de papier et une marge

L'API du composant d'exportation Kendo PDF permet de personnaliser et de spécifier facilement la taille de papier du fichier PDF. document. Pour le moment, il est réglé sur la valeur par défaut auto ce qui signifie que le format du papier est déterminé par le contenu.

Remplaçons le contenu de ./ src / app / app.component. html avec:

 // ./src/app/app.component.html
    
 < div   class  =  " pageWrapper "  >  
   < div   class  =  " content "  >  
     < kendo-pdf-export   #pdf   paperSize  =  " A4 "    margin  =  ] " 2cm "  >  
       < div   class  =  " taille-a4 "  > 
          < p  p  ]>   Créez plus rapidement de meilleures applications JavaScript. La collection ultime de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery,
          Angular, React et Vue. Créez rapidement des applications Web réactives attrayantes et performantes, quel que soit votre choix.
          de votre choix de framework JavaScript.
         </  p > 
          < p >   Créez de meilleures applications JavaScript plus rapidement La collection finale de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery,
          Angular, React et Vue. Créez rapidement des applications Web réactives attrayantes et performantes, quel que soit votre choix.
          de votre choix de framework JavaScript.
         </  p >  
       </  div >  
     </  kendo-pdf-export >  
    
     < div >  
       < button   kendo-button   (cliquez)  =  " pdf.saveAs ( ' demo-content.pdf  ')  " > 
         Exportation au format PDF
       </  bouton >  
     </  div >  
   </  div >  
 </  div >  

Nous avons ajouté deux attributs de données à à savoir:

• paperSize : nous avons défini ce paramètre sur A4.
• margin : Nous avons défini ce paramètre sur 2 cm.

Check Cliquez à nouveau sur la page et cliquez sur le bouton Exporter en PDF . Passez maintenant à ouvrir votre fichier PDF téléchargé et vous remarquerez qu'il ressemble beaucoup mieux comme indiqué ci-dessous:

Conclusion

Le composant d’exportation de PDF de Kendo, présenté ici, est une solution d’exportation et de gestion du contenu HTML au format PDF, qui s'avère pratique lorsque vous devez enregistrer rapidement une page au format PDF à partir de votre application Angular.

Si vous exportez du contenu HTML au format PDF, n'hésitez pas à explorer l'API en cliquant sur le lien pour plus de détails .

J'espère que vous avez appris Consultez le code source ici sur GitHub .