無料の 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