web-dev-qa-db-fra.com

Angular 7: convertir HTML en PDF

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

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

Étant donné que j'ai une tablette, ce que je veux, c'est d'imprimer ce tableau 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é.

Ce que j'ai essayé, c'est ceci:

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'); });

J'ai déjà essayé d'utiliser, comme largeur et hauteur, la taille de la page pdf (avec pdf.internal.pageSize) sans succès. Et j'ai déjà essayé d'utiliser 'pt' et 'mm' au lieu de 'px'.

Des idées?

angularjspdf
5
DeooK

Utilisez cette méthode exemple de travail stackblitz

Dans votre fichier TypeScript

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');
}

Dans votre fichier html

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

<button (click)="downloadPDF()">Export To PDF</button>
1
dasunse
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');
  });
}
0
Bansi29

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
user11059168