1. Produk
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Jana PDF melalui Open Source JavaScript API

Perpustakaan JavaScript Sumber Terbuka untuk Mencipta & Menukar Fail PDF, tambah Grafik & Teks ke PDF melalui JavaScript.

JSPDF ialah penyelesaian sisi klien HTML5 sumber terbuka untuk penciptaan dan pengurusan dokumen PDF. Ia menyokong ciri hebat seperti pelaporan, sijil, tiket dan banyak lagi. Memandangkan PDF sangat popular di seluruh web dan hampir setiap syarikat menggunakannya untuk berkongsi dokumen dan laporan. Dengan hanya menggunakan beberapa arahan, anda boleh mengakses dan menggunakan semula semua ciri hebat dalam aplikasi anda sendiri. 

Pemikiran hebat tentang perpustakaan JsPDF ialah ia menghasilkan fail PDF apabila pengguna mengklik pada butang muat turun. Ia telah menyertakan sokongan untuk beberapa ciri yang menonjol, seperti menjana dokumen PDF, melukis bentuk dan memasukkan imej ke fail PDF, menambah halaman ke PDF, menambah & memaparkan teks, mengeksport peta sebagai PDF, menukar HTML kepada PDF dan banyak lagi.

Previous Next

Bermula dengan JsPDF

Cara yang disyorkan dan paling mudah untuk bermula ialah meletakkan perpustakaan yang dihoskan CDN ke dalam halaman anda, di bawah ialah arahannya.

gunakan kod Pemasangan

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

Menjana Dokumen PDF melalui Perpustakaan JavaScript

JsPDF menawarkan fungsi untuk penjanaan dokumen PDF serta pengubahsuaian dalam aplikasi JavaScript. Anda boleh menjana dokumen PDF dengan mudah dan menambah halaman baharu padanya. Anda boleh menentukan orientasi dokumen, unit dan format halaman lalai semasa membuat dokumen baharu. Setelah PDF dijana, anda boleh menambah halaman baharu dengan mudah, memasukkan imej, dsb. padanya dengan mudah.

Cipta Dokumen PDF melalui JavaScript

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Memasukkan Teks ke Dokumen PDF melalui JavaScript

API JsPDF memudahkan pembangun JavaScript untuk menambah dan memaparkan teks di dalam dokumen PDF. Untuk melukis teks, anda perlu menentukan nama fon. Kita boleh memilih daripada fon yang ada. Anda juga boleh menukar keluarga fon dan gaya fon. Selepas itu, kita boleh menentukan saiz fon, warna teks dan banyak lagi.

Tambahkan Teks pada PDF Sedia Ada menggunakan JavaScript

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Menambah Grafik pada Dokumen PDF melalui JavaScript

Pustaka JsPDF membolehkan profesional JavaScript melukis grafik di dalam dokumen PDF. Grafik sentiasa menambah nilai pada bahagian kandungan. Pertama, kita perlu menetapkan warna isian dan strok bentuk yang dilukis. Kita juga boleh menetapkan lebar lejang. Setiap fungsi lukisan bentuk mengambil koordinat titik tengah sebagai dua parameter pertama (kecuali segi tiga). Mereka juga mengambil gaya lukisan parameter terakhir. Kita boleh melukis elips, dengan melepasi dua jejari atau bulatan, dengan hanya melepasi satu jejari, segi tiga, dengan melepasi setiap koordinat sudut dan banyak lagi.

Tambahkan imej pada PDF menggunakan JavaScript

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 Melayu