web-dev-qa-db-fra.com

Convertir HTML en PDF en angulaire 6

J'ai un composant (angulaire 6) qui est une agrégation de plusieurs composants. Cela produit un long HTML (j'utilise Bootstrap 4). Maintenant, je veux convertir ce HTML en PDF. J'ai cherché loin et trouvé de nombreuses solutions qui fonctionnent sur jsPDF. L’exigence est de produire une mise en page nette telle qu’elle apparaît dans le code HTML (afin que les utilisateurs puissent sélectionner, copier, etc.). Mais les solutions que j'ai trouvées essayent soit d'ajouter des lignes de texte manuellement, ce qui est impossible dans mon scénario. ou bien ils convertissent (pixellisent?) le HTML au format image. En outre, je souhaite préserver la mise en forme, les polices et le style de mon code HTML.

Jusqu'à présent, j'ai essayé: ceci et ceci . 

htmlangularpdfangular6jspdf
7
Vivekanand P V

La meilleure solution possible que je pourrais trouver jusqu'à maintenant. 

Vous devrez installer les paquets ci-dessous à partir de npm

html2canvas

jspdf

import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

htmltoPDF()
{
    // parentdiv is the html element which has to be converted to PDF
    html2canvas(document.querySelector("#parentdiv")).then(canvas => {

      var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);

      var imgData  = canvas.toDataURL("image/jpeg", 1.0);
      pdf.addImage(imgData,0,0,canvas.width, canvas.height);
      pdf.save('converteddoc.pdf');

  });

}
2
Anirudh

Essayez d'utiliser un service principal pour cela, tel que Thymeleaf ou itextpdf avec Spring Boot. 

0
Dasun Senadeera

Avec quelques efforts, la meilleure solution que mon équipe et moi-même avons trouvée pour notre propre HTML angulaire à PDF problèmes consistait à envoyer le code HTML brut à notre API Java, puis à utiliser wkhtmltopdf ( https: // github. com/wkhtmltopdf/wkhtmltopdf ) avec l'encapsuleur Java ( https://github.com/jhonnymertz/Java-wkhtmltopdf-wrapper ). En surmontant quelques pièges (comme s’assurer que le serveur dispose des polices correctement installées; tout est correctement codé; identifier les sauts de page et les faire fonctionner), nous avons pu reproduire notre page avec précision et utiliser notre HTML angulaire comme modèle universel (qui changements en fonction de différents scénarios). Ce n'est pas une route facile, mais c'est une voie qui produit d'excellents résultats dans un environnement de production au niveau de l'entreprise une fois que vous l'aurez compris.

Il convient de noter que nous avons également essayé jspdf (et d’autres bibliothèques) et que nous sommes parvenus à des conclusions similaires: vous n’avez tout simplement pas fait ce dont nous avions besoin. Espérons que cela aide.

0
MapLion

Référez-vous ceci vous pouvez avoir des idées. pdf-angular

npm-angular

0
chethu