Création de fichiers PDF via l'API JavaScript gratuite

Premiers pas avec PDFMake

PDFMake est disponible sur npm, vous pouvez facilement le télécharger et l'installer sur votre machine. Veuillez utiliser la commande suivante pour une installation fluide.

bower install pdfmake

Générer des fichiers PDF à l'aide de la bibliothèque JavaScript

La bibliothèque JavaScript open source PDFMake permet aux programmeurs de logiciels de générer facilement des documents PDF dans leurs propres applications à l'aide de code JavaScript. La bibliothèque a fourni un ensemble complet de fonctionnalités pour travailler avec des fichiers PDF, telles que le choix des types de police avec la taille, la couleur et le formatage, l'ajout d'une nouvelle page, l'insertion de colonnes, l'ajout et l'application de styles, l'insertion de tableaux, la suppression de pages indésirables, etc. Suite.

Ajouter des en-têtes et des pieds de page au fichier PDF

Les en-têtes et les pieds de page sont des parties très utiles des documents PDF et peuvent être utilisés pour inclure la partie du contenu que les utilisateurs souhaitent voir apparaître sur chaque page d'un document, comme le nom de l'auteur, le titre du document, les numéros de page, le logo, etc. La bibliothèque JavaScript PDFMake a fourni un support complet pour ajouter et modifier des en-têtes et des pieds de page à un document PDF. Il prend en charge des fonctionnalités telles que l'ajout d'en-tête/pied de page répétitifs, l'insertion d'images dans un en-tête/pied de page, l'ajout de numéros de page, et bien plus encore.

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

Insertion d'images dans des fichiers PDF

La bibliothèque JavaScript open source PDFMake a fourni une prise en charge complète pour l'ajout et la modification d'images dans des fichiers PDF à l'aide de commandes JavaScript. La bibliothèque a fourni des fonctionnalités pour définir la largeur et la hauteur de l'image, ajuster une image à l'intérieur d'un rectangle, appeler une image via des URL, mettre à l'échelle l'image proportionnellement et étirer l'image. Si vous souhaitez utiliser la même image dans plusieurs nœuds, vous devez la placer dans le dictionnaire d'images et l'appeler simplement par son nom.

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

Prise en charge de l'orientation de la page et de la marge

La bibliothèque JavaScript gratuite PDFMake a inclus la prise en charge de la définition de la taille de la page, de l'orientation de la page ainsi que des marges de page dans les applications JavaScript. Pour définir la taille de la page, vous devez fournir la largeur et la hauteur de la nouvelle page. Par défaut, la bibliothèque utilise l'orientation de page portrait mais peut facilement la définir en paysage avec un code à une ligne. Il prend également en charge la définition des marges de page et permet aux utilisateurs de contrôler dynamiquement les sauts de page. Il prend en charge les marges gauche, supérieure, droite, inférieure ainsi que horizontales et verticales.

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

Insérer des tableaux au format PDF via JavaScript

La bibliothèque open source PDFMake permet aux programmeurs informatiques d'insérer et de mettre à jour des tableaux dans des fichiers PDF. La bibliothèque prend en charge diverses fonctionnalités avancées pour gérer les colonnes et les cellules des lignes du tableau. Il inclut la prise en charge de l'alignement des tableaux, le style des bordures des tableaux, la définition des largeurs en pourcentage, la rotation des tableaux, la définition de la ligne d'en-tête du tableau sur une nouvelle page et bien d'autres.

 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