通过免费 JavaScript API 创建 PDF 文件

PDFMake 入门

PDFMake 在 npm 上可用，您可以轻松下载并安装在您的机器上。请使用以下命令进行顺利安装。

bower install pdfmake

使用 JavaScript 库生成 PDF 文件

开源 JavaScript 库 PDFMake 使软件程序员可以轻松地使用 JavaScript 代码在他们自己的应用程序中生成 PDF 文档。该库为处理 PDF 文件提供了一套完整的功能，例如选择具有大小、颜色和格式的字体类型、添加新页面、插入列、添加和应用样式、插入表格、删除不需要的页面等等更多的。

将页眉和页脚添加到 PDF 文件

页眉和页脚是 PDF 文档非常有用的部分，可用于包含用户希望出现在文档每一页上的那部分内容，例如作者姓名、文档标题、页码、徽标等。 JavaScript 库 PDFMake 为向 PDF 文档添加和修改页眉和页脚提供了完整的支持。它支持添加重复页眉/页脚、在页眉/页脚中插入图像、添加页码等功能。

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

将图像插入 PDF 文件

开源 JavaScript 库 PDFMake 为使用 JavaScript 命令在 PDF 文件中添加和修改图像提供了完整的支持。该库提供了设置图像宽度和高度、在矩形内拟合图像、通过 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',
   }
  }
 }
};

页面方向和边距支持

免费的 JavaScript 库 PDFMake 支持在 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
		}
	}
}

通过 JavaScript 将表格插入 PDF

开源库 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