Pembuatan File PDF melalui API JavaScript Gratis

Memulai dengan PDFMake

PDFMake tersedia di npm, Anda dapat dengan mudah mengunduhnya dan menginstalnya di mesin Anda. Silakan gunakan perintah berikut untuk kelancaran instalasi.

bower install pdfmake

Hasilkan File PDF menggunakan Pustaka JavaScript

Pustaka JavaScript Open source PDFMake memudahkan pemrogram perangkat lunak untuk menghasilkan dokumen PDF di dalam aplikasi mereka sendiri menggunakan kode JavaScript. Pustaka telah memberikan serangkaian fitur lengkap untuk bekerja dengan file PDF, seperti memilih jenis font dengan ukuran, warna, dan pemformatan, menambahkan halaman baru, menyisipkan kolom, menambahkan dan menerapkan gaya, menyisipkan tabel, menghapus halaman yang tidak diinginkan, dan banyak lagi. lagi.

Tambahkan Header & Footer ke File PDF

Header dan footer adalah bagian dokumen PDF yang sangat berguna dan dapat digunakan untuk menyertakan bagian konten yang ingin ditampilkan pengguna di setiap halaman dokumen seperti nama penulis, judul dokumen, nomor halaman, logo, dan banyak lagi. Pustaka JavaScript PDFMake telah menyediakan dukungan lengkap untuk menambahkan dan memodifikasi header & footer ke dokumen PDF. Ini mendukung fitur seperti menambahkan header/footer berulang, menyisipkan gambar di header/footer, menambahkan nomor halaman, dan banyak lagi.

 var docDefinition = {
 header: 'simple text',
 footer: {
  columns: [
   'Left part',
   { text: 'Right part', alignment: 'right' }
  ]
 },
 content: (...)
};

Memasukkan Gambar ke File PDF

Pustaka JavaScript Open source PDFMake telah memberikan dukungan lengkap untuk menambahkan serta memodifikasi gambar di dalam file PDF menggunakan perintah JavaScript. Pustaka telah menyediakan fitur untuk mengatur lebar dan tinggi gambar, memasang gambar di dalam persegi panjang, memanggil gambar melalui URL, menskalakan gambar secara proporsional, dan meregangkan gambar. Jika Anda ingin menggunakan gambar yang sama di beberapa node, Anda harus memasukkannya ke dalam kamus gambar dan panggil saja dengan namanya.

 var docDefinition = {
 content: [
  {
   // you'll most often use dataURI images on the browser side
   // if no width/height/fit is provided, the original size will be used
   image: 'data:image/jpeg;base64,...encodedContent...'
  },
  {
   // if you specify width, image will scale proportionally
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150
  },
  {
   // if you specify both width and height - image will be stretched
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150,
   height: 150
  },
  {
   // you can also fit the image inside a rectangle
   image: 'data:image/jpeg;base64,...encodedContent...',
   fit: [100, 100]
  },
  {
   // if you reuse the same image in multiple nodes,
   // you should put it to to images dictionary and reference it by name
   image: 'mySuperImage'
  },
  {
   image: 'myImageDictionary/image1.jpg'
  },
  {
   // in browser is supported loading images via url from reference by name in images
   image: 'snow'
  },
  {
   image: 'strawberries'
  },
 ],
 images: {
  mySuperImage: 'data:image/jpeg;base64,...content...',
  snow: 'https://picsum.photos/seed/picsum/200/300',
  strawberries: {
   url: 'https://picsum.photos/id/1080/367/267'
   headers: {
    myheader: '123',
    myotherheader: 'abc',
   }
  }
 }
};

Orientasi Halaman dan Dukungan Margin

Pustaka JavaScript gratis PDFMake telah menyertakan dukungan untuk mengatur ukuran halaman, orientasi halaman, serta margin halaman di dalam aplikasi JavaScript. Untuk mengatur ukuran halaman, Anda perlu memberikan lebar dan tinggi halaman baru. Secara default, perpustakaan menggunakan orientasi halaman potret tetapi dapat dengan mudah mengaturnya ke lanskap dengan kode satu baris. Ini juga menyediakan dukungan untuk mengatur margin halaman dan memungkinkan pengguna untuk mengontrol jeda halaman secara dinamis. Ini mendukung margin kiri, atas, kanan, bawah serta horizontal, dan vertikal.

 
var dd = {
	content: [
		{
			stack: [
				'This header has both top and bottom margins defined',
				{text: 'This is a subheader', style: 'subheader'},
			],
			style: 'header'
		},
		{
			text: [
				'Margins have slightly different behavior than other layout properties. They are not inherited, unlike anything else. They\'re applied only to those nodes which explicitly ',
				'set margin or style property.\n',
			]
		},
		{
			text: 'This paragraph (consisting of a single line) directly sets top and bottom margin to 20',
			margin: [0, 20],
		},
		{
			stack: [
				{text: [
						'This line begins a stack of paragraphs. The whole stack uses a ',
						{text: 'superMargin', italics: true},
						' style (with margin and fontSize properties).',
					]
				},
				{text: ['When you look at the', {text: ' document definition', italics: true}, ', you will notice that fontSize is inherited by all paragraphs inside the stack.']},
				'Margin however is only applied once (to the whole stack).'
			],
			style: 'superMargin'
		},
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			alignment: 'right',
			margin: [0, 190, 0, 80]
		},
		subheader: {
			fontSize: 14
		},
		superMargin: {
			margin: [20, 0, 40, 0],
			fontSize: 15
		}
	}
}

Masukkan Tabel ke PDF melalui JavaScript

Pustaka open source PDFMake memungkinkan pemrogram komputer untuk menyisipkan dan memperbarui tabel di dalam file PDF. Pustaka mendukung berbagai fitur lanjutan untuk menangani kolom dan sel baris tabel. Ini telah mencakup dukungan untuk perataan tabel, batas gaya tabel, menentukan lebar dalam persen, memutar tabel, menentukan baris Header Tabel di halaman baru dan banyak lagi.

 var docDefinition = {
 content: [
  {
   layout: 'lightHorizontalLines', // optional
   table: {
    // headers are automatically repeated if the table spans over multiple pages
    // you can declare how many rows should be treated as headers
    headerRows: 1,
    widths: [ '*', 'auto', 100, '*' ],
    body: [
     [ 'First', 'Second', 'Third', 'The last one' ],
     [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
     [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
   }
  }
 ]
};
pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
// tableLayouts, fonts and vfs are all optional - falsy values will cause