Comment générer un PDF en utilisant Angular 7?
Je dois générer un rapport PDF PDF à partir des données entrées par un utilisateur, qui seraient enregistrées dans un objet. Jusqu'à présent, je suis tombé sur des choses qui génèrent une page HTML, puis prennent une capture d'écran et le convertit en PDF. Je cherche à générer un PDF directement à partir des données stockées dans l'objet. Des idées?
C'est une exigence courante, mais vous n'avez pas fourni beaucoup de détails sur les exigences spécifiques de vos PDF. Vous pouvez regarder:
https://www.npmjs.com/package/angular-pdf-generator
ou
https://parall.ax/products/jspdf
comme options côté client. Il existe également d'autres options en fonction de ce que vous voudrez probablement faire avec le PDF une fois généré. Par exemple, il pourrait être plus judicieux de renvoyer les données à votre serveur (si vous avez un) pour générer un PDF ET le stocker dans une base de données, etc.
J'espère que cela pourra aider.
Vous pouvez télécharger du HTML au format PDF, j'espère que cela vous aidera ..!
. Html
<div id="pdfTable" #pdfTable>
<h1>{{name}}</h1>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
<div> <button (click)="downloadAsPDF()">Export To PDF</button></div>
. ts
public downloadAsPDF() {
const doc = new jsPDF();
const specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
const pdfTable = this.pdfTable.nativeElement;
doc.fromHTML(pdfTable.innerHTML, 15, 15, {
width: 190,
'elementHandlers': specialElementHandlers
});
doc.save('tableToPdf.pdf');
}
Le code suivant a été utilisé et a fonctionné pour mon projet
Étape 1: exécutez les commandes suivantes pour installer les packages npm
> npm install jspdf
> npm install html2canvas
Étape 2: importez les packages installés dans app.components.ts. Je n'ai pas importé ces packages dans constructor ()
> import * as jspdf from 'jspdf';
> import html2canvas from 'html2canvas';
Étape 3: Donnez un identifiant pour la div HTML qui doit être exportée au format PDF. Ajoutez un bouton qui active également la fonction.
<div id="MyDIv" style="margin-left: 45px;" class="main-container">
</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>
Étape 4: Écrivez le code pour générer PDF comme suit
exportAsPDF()
{
let data = document.getElementById('MyDIv');
html2canvas(data).then(canvas => {
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
// let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);
pdf.save('Filename.pdf');
});
}
Vous pouvez imprimer en utilisant le plugin PDFMAKE. Vous pouvez y accéder sur Git avec ce lien https://www.npmjs.com/package/ng-pdf-make . Une fois l'installation très facile, importez simplement, ajoutez ces bibliothèques dans le composant qui s'imprimera:
importer * en pdfMake depuis "pdfmake/build/pdfmake";
import * as pdfFonts from "pdfmake/build/vfs_fonts";
After that, create a function that will print your document such as:
printDoc(){
pdfMake.vfs = pdfFonts.pdfMake.vfs;
let dd = {
// Here you put the page settings as your footer, for example:
footer: function(currentPage, pageCount) {
return [
{
text:
currentPage.toString() +
" de " +
pageCount +
"\n" +
"Footer Name",
alignment: currentPage ? "center" : "center"
}
];
},
// Here you can enter the page size and orientation:
pageSize: "A4",
pageOrientation: "Portrait",
//in pageOrientation you can put "Portrait" or "landscape"
// start the body of your impression:
content: [
{
table: {
widths: ["*"],
body: [
[
{
text: [
{ text: `${'Text Example'}`, bold: true }
],
style: "header",
width: "150",
alignment: "left",
border: [true, true, true, false],
margin: [0, 15, 0, 15]
}
]
]
}
},
]
}
pdfMake.createPdf(dd).download("Name of Print");
}
Les données saisies par l'utilisateur peuvent être affichées sur la page html et converties en pdf. Sinon, si vous souhaitez lier l'objet dans le modèle html, utilisez guidon. Ensuite, le modèle html peut être converti en PDF in angular 2/4/6/7 en utilisant jspdf et html2canvas.Le contenu html doit être traité comme ci-dessous.Ce code prend en charge la création de pdf de plusieurs pages.
Ici les données -> htmlcontent
TS :generatePdf(data) {
html2canvas(data, { allowTaint: true }).then(canvas => {
let HTML_Width = canvas.width;
let HTML_Height = canvas.height;
let top_left_margin = 15;
let PDF_Width = HTML_Width + (top_left_margin * 2);
let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
let canvas_image_width = HTML_Width;
let canvas_image_height = HTML_Height;
let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
canvas.getContext('2d');
let imgData = canvas.toDataURL("image/jpeg", 1.0);
let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (let i = 1; i <= totalPDFPages; i++) {
pdf.addPage([PDF_Width, PDF_Height], 'p');
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
}
pdf.save("HTML-Document.pdf");
});
}
HTML:
<div #contentToConvert> Some content here </div>
<button (click)="generatePdf(contentToConvert)">Generate PDF</button>
Voici un bon aperçu des outils et technologies disponibles: Conversion html en pdf moderne 2019 Et un exemple de travail avec jspdf & html2canvas: ici