Angular Generate Pdf From Html With Css

4 min read Jun 28, 2024

Membuat PDF dari HTML dengan CSS di Angular

Angular merupakan framework JavaScript yang populer untuk membangun aplikasi web. Salah satu kebutuhan umum dalam pengembangan aplikasi web adalah kemampuan untuk menghasilkan PDF dari konten HTML.

Artikel ini akan membahas cara menghasilkan PDF dari HTML dengan CSS di Angular.

Cara menghasilkan PDF dari HTML dengan CSS di Angular

Ada beberapa library yang dapat digunakan untuk menghasilkan PDF dari HTML dengan CSS di Angular. Berikut adalah beberapa contoh library yang populer:

jsPDF: jsPDF adalah library JavaScript yang memungkinkan Anda untuk membuat dan mengelola PDF dari browser. Library ini menawarkan API yang sederhana untuk menambahkan teks, gambar, dan elemen HTML lainnya ke PDF.
html2canvas: html2canvas adalah library JavaScript yang memungkinkan Anda untuk mengambil snapshot dari elemen HTML dan mengubahnya menjadi gambar Canvas. Gambar Canvas ini kemudian dapat digunakan untuk membuat PDF dengan library jsPDF.
ng2-pdf-viewer: ng2-pdf-viewer adalah library Angular yang memungkinkan Anda untuk menampilkan dan berinteraksi dengan file PDF di browser. Library ini juga menyediakan metode untuk mengonversi HTML ke PDF.

Contoh Implementasi dengan jsPDF dan html2canvas

Berikut adalah contoh implementasi menggunakan jsPDF dan html2canvas untuk menghasilkan PDF dari HTML dengan CSS di Angular:

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css']
})
export class PdfGeneratorComponent {

  @ViewChild('content') contentRef: ElementRef;

  generatePDF() {
    // Gunakan html2canvas untuk mengambil snapshot dari elemen HTML.
    html2canvas(this.contentRef.nativeElement).then(canvas => {
      // Buat instance jsPDF.
      const doc = new jsPDF();

      // Dapatkan gambar Canvas.
      const imgData = canvas.toDataURL('image/png');

      // Tambahkan gambar ke PDF.
      doc.addImage(imgData, 'PNG', 0, 0);

      // Simpan PDF.
      doc.save('my-pdf.pdf');
    });
  }
}

Template HTML:


  Judul PDF
  Isi konten PDF.

Penjelasan Kode:

Kode tersebut menggunakan ViewChild untuk mendapatkan referensi ke elemen HTML dengan #content.
Fungsi generatePDF() memanggil html2canvas untuk mengambil snapshot dari elemen #content.
Kemudian, fungsi tersebut membuat instance jsPDF dan menambahkan gambar Canvas ke PDF.
Terakhir, fungsi tersebut menyimpan PDF dengan nama my-pdf.pdf.

Kesimpulan

Artikel ini telah membahas cara menghasilkan PDF dari HTML dengan CSS di Angular menggunakan library jsPDF dan html2canvas. Anda dapat memilih library yang sesuai dengan kebutuhan Anda.

Pastikan untuk mempelajari dokumentasi library yang Anda pilih untuk memahami fitur dan penggunaan yang benar.