Můžeme generovat PDF pro různé dokumenty, jako jsou faktury, výkazy, formuláře atd. Ve webové aplikaci můžeme vytvářet pdf pomocí metod tisku z prohlížeče, nástroje třetí strany a také si můžeme PDF stáhnout na straně klienta.
K dispozici je několik dalších balíčků PDF, jako například:
- jsPDF
- PDFMake
- ng2-pdf-viewer
V tomto příspěvku se však zaměříme pouze na plugin generátoru jsPDF pro export PDF v Angular 13.
jsPDF je modul založený na JavaScriptu, používá se ke generování PDF na straně klienta a nabízí velké množství metod, které vám umožňují snadno přizpůsobit zobrazení PDF.
Oficiální dokumentaci si můžete prohlédnout zde.
Co je soubor PDF?
Adobe formulovalo PDF přibližně v 90. letech 20. století. Má dva hlavní cíle. Prvním cílem bylo, aby uživatelé měli možnost otevřít dokumenty na jakémkoli hardwaru nebo operačním systému. Druhým cílem bylo, že kdykoli uživatel otevře dokument PDF, musí vypadat stejně.
Soubory PDF zahrnují text, obrázky, vložená písma, hypertextové odkazy, video, interaktivní tlačítka, formuláře a další.
Nastavení Angular Project
Použijte příkaz přes Angular CLI k vytvoření zcela nového projektu Angular.
ng new angular-pdfDále spusťte aplikaci Angular ve svém oblíbeném IDE.
Nainstalujte Bootstrap
Abychom zvládli část uživatelského rozhraní, měli bychom nainstalovat knihovnu Bootstrap v Angular. Budeme používat komponentu uživatelského rozhraní tabulky Bootstrap, tato tabulka bude obsahovat data, která převedeme do PDF.
npm install bootstrapZahrňte cestu CSS Bootstrapu do pole stylů v angular.json .
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]Nainstalujte balíček jsPDF
Dále nainstalujte balíček jsPDF do vaší úhlové aplikace pomocí níže uvedeného příkazu.
npm install jspdfMusíme importovat knihovny jsPDF a html2canvas do stejné komponenty, odkud musíme exportovat PDF do Angular.
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';Přidat falešná data
Potřebujeme ukázat nějaká náhodná data, takže deklarujte proměnnou s nějakými falešnými uživatelskými daty.
USERS = [
{
"id": 1,
"name": "Leanne Graham",
"email": "[email protected]",
"phone": "1-770-736-8031 x56442"
},
{
"id": 2,
"name": "Ervin Howell",
"email": "[email protected]",
"phone": "010-692-6593 x09125"
},
{
"id": 3,
"name": "Clementine Bauch",
"email": "[email protected]",
"phone": "1-463-123-4447",
},
{
"id": 4,
"name": "Patricia Lebsack",
"email": "[email protected]",
"phone": "493-170-9623 x156"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"email": "[email protected]",
"phone": "(254)954-1289"
},
{
"id": 6,
"name": "Mrs. Dennis",
"email": "[email protected]",
"phone": "1-477-935-8478 x6430"
}
];Stáhněte si PDF v Angular
Chcete-li stáhnout soubor PDF, nazýváme nové jsPDF() objekt a definujte v něm velikost PDF. Soubor PDF.save() funkce bere jako argument název staženého PDF.
public openPDF(): void {
let DATA: any = document.getElementById('htmlData');
html2canvas(DATA).then((canvas) => {
let fileWidth = 208;
let fileHeight = (canvas.height * fileWidth) / canvas.width;
const FILEURI = canvas.toDataURL('image/png');
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
PDF.save('angular-demo.pdf');
});
}Zobrazení tabulky bootstrap
Pomocí modulů třídy a uživatelského rozhraní modulu Bootstrap vytvořte tabulku a přidejte do ní dynamická data.
<div class="col-md-8" id="htmlData">
<table class="table table-bordered">
<tr class="table-primary">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr *ngFor="let user of USERS">
<th>{{user.id}}</th>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>Dále přidejte tlačítko Stáhnout PDF s níže uvedeným kódem.
<div class="col-md-4 text-right">
<button class="btn btn-success btn-block" (click)="openPDF()">Download PDF</button>
</div>Konečný kód
Dále otevřete app.component.ts soubor a přidejte následující kód.
import { Component, ViewChild, ElementRef } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@ViewChild('htmlData') htmlData!: ElementRef;
USERS = [
{
id: 1,
name: 'Leanne Graham',
email: '[email protected]',
phone: '1-770-736-8031 x56442',
},
{
id: 2,
name: 'Ervin Howell',
email: '[email protected]',
phone: '010-692-6593 x09125',
},
{
id: 3,
name: 'Clementine Bauch',
email: '[email protected]',
phone: '1-463-123-4447',
},
{
id: 4,
name: 'Patricia Lebsack',
email: '[email protected]',
phone: '493-170-9623 x156',
},
{
id: 5,
name: 'Chelsey Dietrich',
email: '[email protected]',
phone: '(254)954-1289',
},
{
id: 6,
name: 'Mrs. Dennis',
email: '[email protected]',
phone: '1-477-935-8478 x6430',
},
];
constructor() {}
public openPDF(): void {
let DATA: any = document.getElementById('htmlData');
html2canvas(DATA).then((canvas) => {
let fileWidth = 208;
let fileHeight = (canvas.height * fileWidth) / canvas.width;
const FILEURI = canvas.toDataURL('image/png');
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
PDF.save('angular-demo.pdf');
});
}
}Poté otevřete app.component.html soubor a přidejte následující kód.
<div class="container">
<div class="row">
<div class="col-md-8" id="htmlData">
<table class="table table-bordered">
<tr class="table-primary">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr *ngFor="let user of USERS">
<th>{{user.id}}</th>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>
<div class="col-md-4 text-right">
<button class="btn btn-success btn-block" (click)="openPDF()">Download PDF</button>
</div>
</div>
</div>Pomocí následujícího příkazu spusťte aplikaci v prohlížeči.
ng serve --open
No, to je ono. Naučili jsme se exportovat data v Angular s balíčkem jsPDF. Doufám, že se vám tento návod bude líbit a budete ho sdílet, děkuji za přečtení!