PDF-tiedostojen luominen ilmaisen JavaScript-sovellusliittymän kautta

PDFMaken käytön aloittaminen

PDFMake on saatavilla osoitteessa npm, voit helposti ladata sen ja asentaa sen koneellesi. Käytä seuraavaa komentoa sujuvaan asennukseen.

bower install pdfmake

Luo PDF-tiedostoja JavaScript-kirjaston avulla

Avoimen lähdekoodin JavaScript-kirjasto PDFMake tekee ohjelmoijien helpoksi luoda PDF-dokumentteja omissa sovelluksissaan JavaScript-koodin avulla. Kirjasto on tarjonnut täydellisen joukon ominaisuuksia PDF-tiedostojen käsittelyyn, kuten fonttityyppien valitseminen koon, värin ja muotoilun mukaan, uuden sivun lisääminen, sarakkeiden lisääminen, tyylien lisääminen ja käyttäminen, taulukoiden lisääminen, ei-toivottujen sivujen poistaminen ja monia lisää.

Lisää ylä- ja alatunnisteet PDF-tiedostoon

Ylä- ja alatunnisteet ovat erittäin hyödyllisiä PDF-dokumenttien osia, ja niitä voidaan käyttää sisällyttämään se osa sisällöstä, jonka käyttäjät haluavat näkyvän asiakirjan jokaisella sivulla, kuten tekijän nimi, asiakirjan otsikko, sivunumerot, logo ja paljon muuta. JavaScript-kirjasto PDFMake on tarjonnut täydellisen tuen ylä- ja alatunnisteiden lisäämiseen ja muokkaamiseen PDF-dokumenttiin. Se tukee ominaisuuksia, kuten toistuvien ylä-/alatunnisteiden lisääminen, kuvien lisääminen ylä-/alatunnisteeseen, sivunumeroiden lisääminen ja paljon muuta.

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

Kuvien lisääminen PDF-tiedostoihin

Avoimen lähdekoodin JavaScript-kirjasto PDFMake on tarjonnut täydellisen tuen kuvien lisäämiseen ja muokkaamiseen PDF-tiedostojen sisällä JavaScript-komentojen avulla. Kirjastossa on ominaisuuksia kuvan leveyden ja korkeuden asettamiseen, kuvan sovittamiseen suorakulmion sisään, kuvan kutsumiseen URL-osoitteiden kautta, kuvan suhteelliseen skaalaukseen ja kuvan venyttämiseen. Jos haluat käyttää samaa kuvaa useissa solmuissa, sinun on lisättävä se kuvasanakirjaan ja kutsuttava sitä vain nimellä.

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

Sivun suunta ja marginaalituki

Ilmainen JavaScript-kirjasto PDFMake sisältää tuen sivun koon, sivusuunnan ja sivumarginaalien asettamiseen JavaScript-sovelluksissa. Sivun koon määrittämiseksi sinun on annettava uuden sivun leveys ja korkeus. Kirjasto käyttää oletusarvoisesti pystysuuntaista sivusuuntaa, mutta voi helposti asettaa sen vaakasuuntaiseksi yhden rivin koodilla. Se tukee myös sivun marginaalien asettamista ja antaa käyttäjille mahdollisuuden hallita sivunvaihtoja dynaamisesti. Se tukee vasenta, ylä-, oikea-, ala- sekä vaaka- ja pystymarginaalia.

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

Lisää taulukoita PDF-muotoon JavaScriptin kautta

Avoimen lähdekoodin kirjasto PDFMake antaa ohjelmoijille mahdollisuuden lisätä ja päivittää taulukoita PDF-tiedostoihin. Kirjasto tukee useita edistyneitä ominaisuuksia taulukon rivien sarakkeiden ja solujen käsittelyyn. Se sisältää tuen taulukon kohdistukselle, tyylin taulukon reunuksille, leveyden määrittämiselle prosentteina, taulukoiden kiertämisellä, taulukon otsikkorivin määrittämisellä uudella sivulla ja paljon muuta.

 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