การสร้างไฟล์ PDF ผ่าน JavaScript ฟรี API

เริ่มต้นใช้งาน PDFMake

PDFMake พร้อมใช้งานที่ npm คุณสามารถดาวน์โหลดและติดตั้งลงในเครื่องของคุณได้อย่างง่ายดาย โปรดใช้คำสั่งต่อไปนี้เพื่อการติดตั้งที่ราบรื่น

bower install pdfmake

สร้างไฟล์ PDF โดยใช้ JavaScript Library

ไลบรารี JavaScript แบบโอเพนซอร์ส PDFMake ช่วยให้โปรแกรมเมอร์ซอฟต์แวร์สร้างเอกสาร PDF ภายในแอปพลิเคชันของตนเองได้อย่างง่ายดายโดยใช้โค้ด JavaScript ไลบรารี่ได้มอบชุดคุณสมบัติที่ครบถ้วนสำหรับการทำงานกับไฟล์ PDF เช่น การเลือกประเภทฟอนต์ที่มีขนาด สี และการจัดรูปแบบ การเพิ่มหน้าใหม่ การแทรกคอลัมน์ การเพิ่มและใช้สไตล์ การแทรกตาราง การลบหน้าที่ไม่ต้องการ และอื่นๆ อีกมากมาย มากกว่า.

เพิ่มส่วนหัวและส่วนท้ายลงในไฟล์ PDF

หัวกระดาษและท้ายกระดาษเป็นส่วนที่มีประโยชน์มากของเอกสาร PDF และสามารถใช้เพื่อรวมส่วนนั้นของเนื้อหาที่ผู้ใช้ต้องการให้ปรากฏบนทุกหน้าของเอกสาร เช่น ชื่อผู้เขียน ชื่อเอกสาร หมายเลขหน้า โลโก้ และอื่นๆ อีกมากมาย ไลบรารี JavaScript PDFMake รองรับการเพิ่มและแก้ไขส่วนหัวและส่วนท้ายของเอกสาร PDF อย่างสมบูรณ์ รองรับคุณสมบัติต่างๆ เช่น การเพิ่มส่วนหัว/ส่วนท้ายซ้ำ การแทรกรูปภาพในส่วนหัว/ส่วนท้าย การเพิ่มหมายเลขหน้า และอื่นๆ อีกมากมาย

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

การแทรกรูปภาพลงในไฟล์ PDF

ไลบรารี JavaScript โอเพ่นซอร์ส PDFMake รองรับการเพิ่มและแก้ไขรูปภาพภายในไฟล์ PDF โดยใช้คำสั่ง JavaScript อย่างสมบูรณ์ ไลบรารี่ได้จัดเตรียมคุณลักษณะสำหรับการตั้งค่าความกว้างและความสูงของรูปภาพ ปรับรูปภาพให้อยู่ในสี่เหลี่ยมผืนผ้า เรียกรูปภาพผ่าน URL ปรับขนาดรูปภาพตามสัดส่วน และขยายรูปภาพ หากคุณต้องการใช้รูปภาพเดียวกันในหลายโหนด คุณต้องใส่รูปภาพนั้นในพจนานุกรมรูปภาพแล้วเรียกตามชื่อ

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

การวางแนวหน้าและการสนับสนุนมาร์จิ้น

PDFMake ไลบรารี JavaScript ฟรีได้รวมการสนับสนุนสำหรับการตั้งค่าขนาดหน้า การวางแนวของหน้า และระยะขอบของหน้าในแอป JavaScript ในการตั้งค่าขนาดหน้า คุณต้องระบุความกว้างและความสูงของหน้าใหม่ ตามค่าเริ่มต้น ไลบรารีจะใช้การวางแนวหน้าแนวตั้ง แต่สามารถตั้งค่าให้เป็นแนวนอนได้อย่างง่ายดายด้วยโค้ดซับเดียว นอกจากนี้ยังรองรับการตั้งค่าระยะขอบของหน้าและอนุญาตให้ผู้ใช้ควบคุมตัวแบ่งหน้าแบบไดนามิก รองรับระยะขอบซ้าย บน ขวา ล่าง เช่นเดียวกับแนวนอน และแนวตั้ง

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

แทรกตารางเป็น PDF ผ่าน JavaScript

ไลบรารีโอเพนซอร์ส PDFMake ช่วยให้โปรแกรมเมอร์คอมพิวเตอร์สามารถแทรกและอัปเดตตารางภายในไฟล์ PDF ได้ ไลบรารีรองรับคุณสมบัติขั้นสูงต่างๆ สำหรับการจัดการคอลัมน์และเซลล์แถวของตาราง มีการรองรับการจัดตำแหน่งตาราง เส้นขอบตารางสไตล์ การกำหนดความกว้างเป็นเปอร์เซ็นต์ หมุนตาราง กำหนดแถวส่วนหัวของตารางในหน้าใหม่ และอื่นๆ อีกมากมาย

 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