5
votes

Angular 7: convertir du HTML en PDF

J'essaie de convertir un tableau HTML en PDF sans succès.

J'ai utilisé jsPDF pour le faire mais le résultat est vraiment médiocre et j'essaie de comprendre pourquoi.

Vu que j'ai une tablette, ce que je souhaite, c'est que ce tableau soit imprimé sur des pages A4 en mode paysage (en utilisant toutes les pages nécessaires). Mon problème est que le PDF est composé d'images (et je préfère le texte) et que les images sont de très mauvaise qualité.

Voici ce que j'ai essayé:

const html = document.getElementById('resultTable');
const pdf = new jsPDF('landscape', 'px', 'a4');

pdf.addHTML(html, 0, 0, {
    'width': html.clientWidth,
    'height': html.clientHeight
}, () => { pdf.save('web.pdf'); });

angular jspdf

0 commentaires

4 Réponses :

2
votes

Cette tâche n'est pas si simple. Sur le serveur, j'ai essayé d'utiliser wkhtmltopdf mais j'ai fini par chercher une meilleure solution, car avec elle, je ne peux pas utiliser toute la puissance du CSS pour l'impression. Je pense que c'est le même problème avec les outils côté client comme jsPDF, vous n'obtiendrez pas un résultat attendu et cohérent.

Le chrome sans tête dans Google Cloud est mon choix en ce moment.

Voici un bon aperçu des outils et technologies disponibles Modern Conversion HTML en PDF

< UPDATE:

Si vous devez créer un fichier PDF et que vous ne parvenez pas à installer quoi que ce soit sur votre serveur, vous pouvez le faire en utilisant Headless Chrome et Google Cloud Function.

en utilisant-puppeteer-in-google-cloud-functions

puppeteering-in-firebase-google-cloud- fonctions

MISE À JOUR 2:

Et au fait, vous avez toujours une option pour imprimer au format PDF dans le navigateur. Cependant, je ne sais pas comment cela fonctionne sur les tablettes Android, Safari pour iOS peut exporter au format PDF.

5 commentaires

Toutes ces solutions ne s'appliquent pas à mon application. Je ne peux pas supposer que l'utilisateur utilisera Chrome et je ne peux certainement pas installer une autre application comme wkhtmltopdf (ou même Chrome).

La conversion doit être effectuée sur le serveur. Vous utilisez le chrome headless sur le serveur cloud.google.com/blog/products/gcp/...

Cela ne sert à rien de faire cela sur le serveur dans mon cas: ce que je dois convertir en PDF, c'est la vue résultante obtenue par un utilisateur après une recherche. Au fait, je ne peux rien installer, même sur le serveur. Si je ne trouve pas de solution client, je réaliserai probablement la conversion avec Java et iText directement sur le back-end.

@DeooK vous êtes si maigre que vous ne pouvez même pas lire et apprendre les choses que je vous ai suggérées, personne ne fera votre travail. J'ai passé beaucoup de temps à essayer de résoudre cette tâche. En faisant cela du côté client, vous aurez beaucoup de douleur et des résultats incohérents. CONSEIL: En utilisant le chrome sans tête dans, vous pouvez POSTER votre HTML ou votre URL dans les résultats de la recherche (les mêmes résultats que ceux affichés par l'utilisateur) dans la fonction Cloud qui créera le PDF pour vous. medium.com/@ebidel/… et medium.com/@ebidel/…

Ouais, merveilleux, mais ... JE NE CONTRÔLE PAS L'INSTALLATION DU SERVEUR. Je ne peux pas utiliser la fonctionnalité cloud et je ne peux rien installer sur le serveur marsine. Je dois mettre tout ce dont j'ai besoin sur l'application Java ou sur l'application Angular.

0
votes

Essayez plutôt .html () .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function convert() {
        let pdf = new jsPDF('l', 'pt', [tblWidth, tblHeight]);
        pdf.html(document.getElementById('resultTable'), {
            callback: function () {
                // pdf.save('web.pdf');
                window.open(pdf.output('bloburl')); // use this to debug
            }
        });
    }
</script>

0 commentaires

0
votes

public downloadPdf() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('printpdf')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save('mypdf.pdf');
  });
}

1 commentaires

1.jspdf 2. import h2c depuis 'html2canvas'; 3.Highcharts utilisant ce package

2
votes

Utilisez cette méthode exemple de travail de stackblitz

In you fichier typographique

<div id="content" #content>
    <!-- Put your content here -->
</div>

<button (click)="downloadPDF()">Export To PDF</button>

Dans votre fichier html

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


public downloadPDF() {
   const doc = new jsPDF();

   const specialElementHandlers = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const content = this.content.nativeElement;

   doc.fromHTML(content.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElementHandlers
   });

   doc.save('test.pdf');
}

3 commentaires

Ne fonctionne pas .. Obtention d'une erreur "ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_9 __. JsPDF n'est pas un constructeur"

@ afsarkhan10182 veuillez consulter l'exemple stackblitx. Ça fonctionne. voir stackblitz.com/edit/angular-html-to-pdf-example

@dasunse Avez-vous importé html2canvas ou un script? Parce que vérifier la réponse stackoverflow.com / questions / 51518819 /…