Δημιουργία αρχείων PDF μέσω Δωρεάν JavaScript API

Ξεκινώντας με το PDFMake

Το PDFMake είναι διαθέσιμο στις npm, μπορείτε εύκολα να το κατεβάσετε και να το εγκαταστήσετε στον υπολογιστή σας. Χρησιμοποιήστε την ακόλουθη εντολή για ομαλή εγκατάσταση.

bower install pdfmake

Δημιουργήστε αρχεία PDF χρησιμοποιώντας τη Βιβλιοθήκη JavaScript

Η βιβλιοθήκη 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',
   }
  }
 }
};

Προσανατολισμός σελίδας και υποστήριξη περιθωρίου

Η δωρεάν βιβλιοθήκη 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
		}
	}
}

Εισαγωγή πινάκων σε 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