Penciptaan Fail PDF melalui API JavaScript Percuma

Bermula dengan PDFMake

PDFMake tersedia di npm, Anda boleh memuat turun dan memasangnya dengan mudah pada mesin anda. Sila gunakan arahan berikut untuk pemasangan yang lancar.

bower install pdfmake

Hasilkan Fail PDF menggunakan Perpustakaan JavaScript

Pustaka JavaScript sumber terbuka PDFMake memudahkan pengaturcara perisian menjana dokumen PDF di dalam aplikasi mereka sendiri menggunakan kod JavaScript. Perpustakaan telah memberikan set lengkap ciri untuk bekerja dengan fail PDF, seperti memilih jenis fon dengan saiz, warna, dan pemformatan, menambah halaman baharu, memasukkan lajur, menambah dan menggunakan gaya, memasukkan jadual, memadam halaman yang tidak diingini, dan banyak lagi. lebih.

Tambahkan Pengepala & Pengaki pada Fail PDF

Pengepala dan pengaki adalah bahagian yang sangat berguna dalam dokumen PDF dan boleh digunakan untuk memasukkan bahagian kandungan yang pengguna mahu muncul pada setiap halaman dokumen seperti nama pengarang, tajuk dokumen, nombor halaman, logo dan banyak lagi. Pustaka JavaScript PDFMake telah menyediakan sokongan lengkap untuk menambah dan mengubah suai pengepala & pengaki pada dokumen PDF. Ia menyokong ciri seperti menambah pengepala/pengaki berulang, memasukkan imej dalam pengepala/pengaki, menambah nombor halaman dan banyak lagi.

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

Memasukkan Imej ke Fail PDF

Perpustakaan JavaScript sumber terbuka PDFMake telah menyediakan sokongan lengkap untuk menambah serta mengubah suai imej dalam fail PDF menggunakan arahan JavaScript. Perpustakaan telah menyediakan ciri untuk menetapkan lebar dan ketinggian imej, memasang imej di dalam segi empat tepat, memanggil imej melalui URL, menskala imej secara berkadar dan regangan imej. Jika anda ingin menggunakan imej yang sama dalam berbilang nod, anda perlu memasukkannya ke dalam kamus imej dan hanya memanggilnya 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 Sokongan Margin

Perpustakaan JavaScript percuma PDFMake telah menyertakan sokongan untuk menetapkan saiz halaman, orientasi halaman serta margin halaman dalam aplikasi JavaScript. Untuk menetapkan saiz halaman, anda perlu menyediakan lebar dan ketinggian halaman baharu. Secara lalai, pustaka menggunakan orientasi halaman potret tetapi boleh menetapkannya dengan mudah kepada landskap dengan kod satu pelapik. Ia juga menyediakan sokongan untuk menetapkan margin halaman dan membolehkan pengguna mengawal pemisah halaman secara dinamik. Ia menyokong jidar kiri, atas, kanan, bawah serta mendatar dan menegak.

 
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
		}
	}
}

Sisipkan Jadual ke PDF melalui JavaScript

Pustaka sumber terbuka PDFMake membolehkan pengaturcara komputer memasukkan dan mengemas kini jadual di dalam fail PDF. Pustaka menyokong pelbagai ciri lanjutan untuk mengendalikan lajur dan sel baris jadual. Ia termasuk sokongan untuk penjajaran jadual, sempadan jadual gaya, menentukan lebar dalam peratus, putar jadual, menentukan baris Pengepala Jadual pada halaman baharu 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