PDF Maker adalah perpustakaan untuk menghasilkan dokumen PDF dalam JavaScript.
Proyek ini terinspirasi oleh pdfmake dan dibangun di atas pdf-lib dan fontkit. Hal ini tidak akan ada tanpa kerja keras dan pengetahuan mendalam yang disumbangkan oleh para penulis proyek tersebut.
Fungsi makePdf() membuat data PDF dari definisi dokumen tertentu. Definisi ini adalah objek yang jelas.
Properti terpenting dalam definisi ini diberi nama content . Properti ini menerima daftar blok . Ada berbagai jenis blok, seperti blok teks, blok gambar, blok tata letak kolom dan baris.
const fontData = await readFile ( 'Roboto-Regular.ttf' ) ;
const fontDataItalic = await readFile ( 'Roboto-Italic.ttf' ) ;
const pdfData = await makePdf ( {
// Fonts must be registered (see below)
fonts : {
Roboto : [ { data : fontData } , { data : fontDataItalic , italic : true } ] ,
} ,
// Content as an array of blocks
content : [
// Blocks can contain text and text properties
{ text : 'Lorem ipsum' , fontStyle : 'italic' , textAlign : 'center' , fontSize : 24 } ,
// Text can also be an array of text spans with different properties
{
text : [
'dolor sit amet, consectetur adipiscing elit ' ,
{ text : 'sed do eiusmod' , fontStyle : 'italic' } ,
' tempor, incididunt ut labore et dolore magna aliqua.' ,
] ,
} ,
] ,
} ) ;
await writeFile ( `hello.pdf` , pdfData ) ;Ada lebih banyak contoh di folder contoh/.
Semua font tertanam dalam PDF dan harus didaftarkan pada properti fonts . Data font diterima dalam format .ttf atau .otf , seperti ArrayBuffer atau Uint8Array. Setiap jenis font dapat berisi varian berbeda yang dipilih berdasarkan properti bold dan italic . Keluarga font yang didaftarkan pertama kali menjadi default.
const documentDefinition = {
fonts : {
'DejaVu-Sans' : [
// Different font versions for fontFamily "DejaVu-Sans"
// TTF / OTF font data as ArrayBuffer or Uin8Array
{ data : fontDataDejaVuSansNormal } ,
{ data : fontDataDejaVuSansBold , bold : true } ,
{ data : fontDataDejaVuSansItalic , italic : true } ,
{ data : fontDataDejaVuSansBoldItalic , bold : true , italic : true } ,
] ,
Roboto : [
// Different font versions for fontFamily "Roboto"
{ data : fontDataRobotoNormal } ,
{ data : fontDataRobotoMedium , bold : true } ,
] ,
} ,
content : [
{ text : 'lorem ipsum' , fontFamily : 'Roboto' , fontWeight : 'bold' } , // will use Roboto Medium
{ text : 'dolor sit amet' } , // will use DejaVu-Sans (the font registered first), normal
] ,
} ; Gambar JPG dan PNG didukung. Jika gambar yang sama digunakan lebih dari sekali, data gambar hanya disertakan satu kali dalam PDF. Ukuran gambar dapat dibatasi menggunakan properti width dan height .
// An image block
{ image : 'images/logo.png' , width : 200 , height : 100 } , Untuk menyusun blok secara horizontal, blok dapat dimasukkan ke dalam blok dengan properti columns . Jika kolom memiliki properti width , maka properti tersebut akan dihormati. Id ruang yang tersisa didistribusikan secara merata ke seluruh kolom.
{
columns : [
{ text : 'Column 1' , width : 100 } , // 100 pt wide
{ text : 'Column 2' } , // gets half of the remaining width
{ text : 'Column 3' } , // gets half of the remaining width
] ,
}Tata letak baris dapat digunakan untuk mengelompokkan beberapa baris ke dalam satu blok, misalnya untuk menerapkan properti umum atau untuk menyertakan baris dalam tata letak kolom di sekitarnya.
{
rows : [
{ text : 'Row 1' } ,
{ text : 'Row 2' } ,
{ text : 'Row 3' } ,
] ,
textAlign : 'right' ,
} Setiap blok dapat memiliki properti graphics yang menerima daftar bentuk untuk digambar ke dalam blok tersebut atau fungsi yang mengembalikan daftar bentuk. Fungsi tersebut akan dipanggil dengan lebar dan tinggi blok. Ini dapat digunakan untuk menggambar bentuk yang bergantung pada ukuran balok.
Bentuk dapat berupa garis, persegi panjang, lingkaran, atau jalur SVG. Pada contoh berikut, properti grafis digunakan untuk menggambar latar belakang kuning di belakang teks dan batas biru di tepi kiri.
{
text : 'Lorem ipsum' ,
graphics : ( { width , height } ) => [
{ type : 'rect' , x : 0 , y : 0 , width , height , fillColor : 'yellow' } ,
{ type : 'line' , x1 : 0 , y1 : 0 , x2 : 0 , y2 : height , lineColor : 'blue' , lineWidth : 2 } ,
] ,
padding : { left : 5 } ,
}Lihat juga contoh grafiknya.
Properti margin dapat digunakan untuk menambah ruang di sekitar blok. Ia menerima nilai tunggal (berlaku untuk keempat sisi) sebuah objek dengan salah satu properti top , right , bottom , left , x , dan y . Properti x dan y dapat digunakan sebagai singkatan untuk mengatur left dan right atau top dan bottom secara bersamaan. Nilai dapat diberikan sebagai angka (dalam pt) atau sebagai string dengan satuan. Jika sebuah string diberikan, string tersebut harus berisi salah satu unit pt , in , mm , atau cm ;
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Margin top dan bottom dari blok yang berdekatan diciutkan menjadi satu margin yang ukurannya maksimal dari dua margin tersebut. Margin kolom tidak runtuh.
Properti padding dapat digunakan untuk menambahkan ruang antara konten dan tepi blok.
Properti pageSize tingkat atas dapat digunakan untuk mengatur ukuran halaman. Berbagai ukuran standar didukung, seperti A4 , Letter , dan Legal . Standarnya adalah A4. Ukuran halaman khusus dapat ditentukan sebagai objek dengan properti width dan height . Nilai dapat diberikan sebagai angka (dalam pt) atau sebagai string dengan satuan.
{
pageSize : { width : '20cm' , height : '20cm' }
} Properti pageOrientation dapat digunakan untuk mengatur orientasi halaman. Nilainya dapat berupa portrait atau landscape . Standarnya adalah potret.
{
pageSize : 'A5' ,
pageOrientation : 'landscape' ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Header dan footer yang berulang pada setiap halaman dapat ditentukan menggunakan properti header dan footer opsional. Keduanya menerima satu blok atau fungsi yang mengembalikan satu blok. Fungsi tersebut akan dipanggil dengan nomor halaman dan jumlah halaman total. Nomor halaman dimulai dari 1.
{
footer : ( { pageNumber , pageCount } ) => ( {
text : `Page ${ pageNumber } of ${ pageCount } ` ,
textAlign : 'right' ,
margin : { x : '20mm' , bottom : '1cm' } ,
} ) ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Jeda halaman disertakan secara otomatis. Ketika sebuah blok tidak muat pada halaman saat ini, halaman baru ditambahkan ke dokumen. Untuk menyisipkan hentian halaman sebelum atau sesudah blok, setel properti breakBefore atau breakAfter dari sebuah blok menjadi always . Untuk mencegah hentian halaman, setel properti ini ke avoid .
Hentian halaman juga secara otomatis disisipkan di antara baris-baris blok teks. Untuk mencegah hentian halaman dalam blok teks, atur properti breakInside menjadi avoid .
{
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'This text will go on a new page' , breakBefore : 'always' } ,
] ,
} Meskipun belum ada dokumentasi yang dihasilkan, Anda dapat merujuk ke folder api untuk mengetahui spesifikasi semua properti yang didukung dalam definisi dokumen.
Lihat juga contoh di folder contoh/.
MIT
