npm i jspdf
npm i html2canvas
app.component.html
|
1 2 3 4 5 6 |
<h2>Select Images</h2> <input type="file" (change)="onFileChange($event)" multiple accept="image/*" /> <div class="image-preview" *ngFor="let img of imagePreviews"> <img [src]="img" /> </div> <button (click)="exportToPDF()">Export to PDF</button> |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { Component } from '@angular/core'; import jsPDF from 'jspdf'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { imagePreviews: string[] = []; onFileChange(event: any) { this.imagePreviews = []; const files = event.target.files; if (files && files.length) { for (let file of files) { const reader = new FileReader(); reader.onload = (e: any) => this.imagePreviews.push(e.target.result); reader.readAsDataURL(file); } } } exportToPDF() { const pdf = new jsPDF(); const pageWidth = pdf.internal.pageSize.getWidth(); let count = 0; this.imagePreviews.forEach((img, index) => { const imgProps = pdf.getImageProperties(img); const pdfWidth = pageWidth; const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; if (index !== 0) pdf.addPage(); pdf.addImage(img, 'PNG', 0, 0, pdfWidth, pdfHeight); count++; }); pdf.save('images.pdf'); } } |
app.component.css
|
1 2 3 4 5 6 7 8 |
.image-preview { margin: 10px 0; } .image-preview img { max-width: 100%; height: auto; border: 1px solid #ccc; } |
