Tạo tệp PDF qua API JavaScript miễn phí

Bắt đầu với PDFMake

PDFMake có sẵn tại npm, Bạn có thể dễ dàng tải xuống và cài đặt trên máy của mình. Vui lòng sử dụng lệnh sau để cài đặt suôn sẻ.

bower install pdfmake

Tạo tệp PDF bằng Thư viện JavaScript

Thư viện JavaScript mã nguồn mở PDFMake giúp các lập trình viên phần mềm dễ dàng tạo các tài liệu PDF bên trong các ứng dụng của riêng họ bằng cách sử dụng mã JavaScript. Thư viện đã cung cấp một bộ đầy đủ các tính năng để làm việc với tệp PDF, chẳng hạn như chọn loại phông chữ với kích thước, màu sắc và định dạng, thêm trang mới, chèn cột, thêm và áp dụng kiểu, chèn bảng, xóa các trang không mong muốn, và nhiều hơn.

Thêm Đầu trang & Chân trang vào Tệp PDF

Đầu trang và chân trang là những phần rất hữu ích của tài liệu PDF và có thể được sử dụng để bao gồm phần nội dung mà người dùng muốn xuất hiện trên mỗi trang của tài liệu như tên tác giả, tiêu đề tài liệu, số trang, biểu trưng, v.v. Thư viện JavaScript PDFMake đã cung cấp hỗ trợ hoàn chỉnh để thêm và sửa đổi đầu trang và chân trang cho tài liệu PDF. Nó hỗ trợ các tính năng như thêm đầu trang / chân trang lặp đi lặp lại, chèn hình ảnh vào đầu trang / chân trang, thêm số trang và hơn thế nữa.

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

Chèn hình ảnh vào tệp PDF

Thư viện JavaScript mã nguồn mở PDFMake đã cung cấp hỗ trợ đầy đủ cho việc thêm cũng như sửa đổi hình ảnh bên trong tệp PDF bằng các lệnh JavaScript. Thư viện đã cung cấp các tính năng để thiết lập chiều rộng và chiều cao của hình ảnh, đặt hình ảnh bên trong hình chữ nhật, gọi hình ảnh qua URL, chia tỷ lệ hình ảnh theo tỷ lệ và kéo dài hình ảnh. Nếu bạn muốn sử dụng cùng một hình ảnh trong nhiều nút, bạn cần đưa nó vào từ điển hình ảnh và chỉ cần gọi nó bằng tên của nó.

 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',
   }
  }
 }
};

Định hướng trang và hỗ trợ ký quỹ

Thư viện JavaScript miễn phí PDFMake đã bao gồm hỗ trợ thiết lập kích thước trang, hướng trang cũng như lề trang bên trong các ứng dụng JavaScript. Để đặt kích thước trang, bạn cần cung cấp chiều rộng và chiều cao của trang mới. Theo mặc định, thư viện sử dụng hướng trang dọc nhưng có thể dễ dàng đặt nó thành hướng ngang với mã một lớp. Nó cũng cung cấp hỗ trợ thiết lập lề trang và cho phép người dùng kiểm soát động các ngắt trang. Nó hỗ trợ lề trái, trên, phải, dưới cũng như lề ngang và dọc.

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

Chèn bảng sang PDF qua JavaScript

Thư viện mã nguồn mở PDFMake cho phép lập trình viên máy tính chèn và cập nhật các bảng bên trong tệp PDF. Thư viện hỗ trợ các tính năng nâng cao khác nhau để xử lý các cột và ô hàng của bảng. Nó bao gồm hỗ trợ căn chỉnh bảng, định kiểu đường viền bảng, xác định độ rộng theo phần trăm, xoay bảng, xác định hàng Tiêu đề bảng trên trang mới và nhiều hơn nữa.

 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