via NPM / Bower ?
bower install pdfmake <-- Bower Install
npm install pdfmake <-- NPM install
Apasih keuntungan menggunakan PDFmake ??
dibawah ini gue jabarin 3 keuntungan besar klo lu make PDFmake
- In-Browser
Cetak PDF langsung di browser atau delegasikan ke backend NodeJS Anda. Gunakan definisi dokumen yang sama dalam kedua kasus. - Fully Declarative
Lupakan kalkulasi manual x, y. Deklarasikan struktur dokumen dan biarkan pdfmake melakukan sisanya. - Powerful Layout Engine
Gunakan paragraf, kolom, daftar, tabel, kanvas, dll. Deklarasikan gaya Anda sendiri, gunakan font khusus, bangun DSL dan perpanjang kerangkanya.
Fiturnya PDFmake gimana ??
Buanyakkk oke gue jelasin jabarin dibawah semua nih.
Buanyakkk oke gue jelasin jabarin dibawah semua nih.
- Basics
----------------------------------------------------------------------line-wrappingtext-alignments left/right/centered/justifiednumbered and bulleted listsmarginsimages and vector graphics
---------------------------------------------------------------------- - Tables and Columns
----------------------------------------------------------------------
auto/fixed/star-sized/percentage columnscol-spans and row-spansheaders automatically repeated in case of a page-breaknon-breaking rowsnon-breaking sections keeping headers and rows together---------------------------------------------------------------------- - Styling
-----------------------------------------------------------------------
convenient stylingstyle inheritancecustom style dictionaries----------------------------------------------------------------------- - Page Headers and Footers
-----------------------------------------------------------------------
static or dynamic contentpage numberspage count----------------------------------------------------------------------- - Client-side Helper Methods
-----------------------------------------------------------------------
open in another tabprint auto-triggering printdownload with the specified filename----------------------------------------------------------------------- - Other
-----------------------------------------------------------------------
page dimensions and orientationscustom page breaksfont embeddingsupport for complex, multi-level (nested) structures-----------------------------------------------------------------------
Gimana ? lumayan banyak kan ? hehehe...
How To ??
INSTALL
How To ??
INSTALL
Artikel ini akan memandu Anda melalui dasar-dasar pdfmake dan akan menunjukkan cara membuat file PDF di browser. Jika Anda tertarik untuk mencetak server-side, periksa contoh foldernya.
Untuk memulai dengan konfigurasi default, Anda harus menyertakan dua file:
Untuk memulai dengan konfigurasi default, Anda harus menyertakan dua file:
- pdfmake.min.js
- vfs-font.js - Font default (berisi Roboto, Anda bisa menggunakan Custom Font sebagai gantinya)
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>my first pdfmake example</title>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
</head>
<body>
(...)
Anda dapat mendownload kedua file dari github atau dengan bower:
bower install pdfmake
Dalam kasus terakhir Anda akan menemukan file di bawah bower_components / pdfmake / build.
DOCUMENT DEFINITION OBJECT :
pdfmake mengikuti pendekatan deklaratif.
Ini pada dasarnya berarti, Anda tidak perlu menghitung posisi secara manual atau menggunakan perintah seperti: writeText (teks, x, y) atau moveDown, seperti yang akan Anda lakukan dengan banyak perpustakaan lainnya.
Konsep paling mendasar yang harus dikuasai adalah document-definition-object yang bisa sesederhana:
var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };
atau menjadi cukup kompleks (memiliki tabel multi level, gambar, daftar, paragraf, margin, styles dll ..).
Segera setelah Anda memiliki dokumen-definisi-objek, Anda siap untuk membuat dan membuka / mencetak / mendownload PDF:
// open the PDF in a new window
pdfMake.createPdf(docDefinition).open();
// print the PDF
pdfMake.createPdf(docDefinition).print();
// download the PDF
pdfMake.createPdf(docDefinition).download('optionalName.pdf');
STYLING :
pdfmake memungkinkan style paragraf atau bagiannya:
pdfmake memungkinkan style paragraf atau bagiannya:
var docDefinition = {
content: [
// if you don't need styles, you can use a simple string to define a paragraph
'This is a standard paragraph, using default style',
// using a { text: '...' } object lets you set styling properties
{ text: 'This paragraph will have a bigger font', fontSize: 15 },
// if you set pass an array instead of a string, you'll be able
// to style any fragment individually
{
text: [
'This paragraph is defined as an array of elements to make it possible to ',
{ text: 'restyle part of it and make it bigger ', fontSize: 15 },
'than the rest.'
]
}
]
};
STYLE DICTIONARIES :
Jika Anda menggunakan kembali gaya yang sama di seluruh dokumen, Anda mungkin harus memanfaatkannya.
Jika Anda menggunakan kembali gaya yang sama di seluruh dokumen, Anda mungkin harus memanfaatkannya.
Dictionary :
var docDefinition = {
content: [
{ text: 'This is a header', style: 'header' },
'No styling here, this is a standard paragraph',
{ text: 'Another text', style: 'anotherStyle' },
{ text: 'Multiple styles applied', style: [ 'header', 'anotherStyle' ] }
],
styles: {
header: {
fontSize: 22,
bold: true
},
anotherStyle: {
italic: true,
alignment: 'right'
}
}
};
Untuk memiliki pemahaman styling yang lebih dalam dalam pdfmake, pewarisan gaya dan penggantian styles lokal pada STYLES1, STYLES2 dan STYLES3 di playground.
COLUMNS :
Secara default paragraf diterjemahkan sebagai tumpukan elemen vertikal (satu di bawah yang lain). Namun mungkin untuk membagi ruang yang tersedia menjadi kolom.
var docDefinition = {
content: [
'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns',
{
columns: [
{
// auto-sized columns have their widths based on their content
width: 'auto',
text: 'First column'
},
{
// star-sized columns fill the remaining space
// if there's more than one star-column, available width is divided equally
width: '*',
text: 'Second column'
},
{
// fixed width
width: 100,
text: 'Third column'
},
{
// percentage width
width: '10%',
text: 'Last column'
}
],
// optional space between columns
columnGap: 10
},
'This paragraph goes below all columns and has full width'
]
};
Kolom konten tidak terbatas pada teks sederhana. Ini sebenarnya bisa mengandung elemen pdfmake yang valid. Pastikan untuk melihat contoh COLUMNS di playground.
TABLE :
Tabel konseptual mirip dengan kolom. Namun mereka dapat memiliki header, perbatasan dan sel yang mencakup lebih dari beberapa kolom / baris.
var docDefinition = {
content: [
{
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' ]
]
}
}
]
};
Semua konsep yang terkait dengan tabel dijelaskan dalam contoh TABEL di taman playground.
LISTS :
pdfMake sangat mendukung dalam penggunaan numbered and bulleted lists:
var docDefinition = {
content: [
'Bulleted list example:',
{
// to treat a paragraph as a bulleted list, set an array of items under the ul key
ul: [
'Item 1',
'Item 2',
'Item 3',
{ text: 'Item 4', bold: true },
]
},
'Numbered list example:',
{
// for numbered lists set the ol key
ol: [
'Item 1',
'Item 2',
'Item 3'
]
}
]
};
HEADER AND FOOTER :
Halaman header dan footer di pdfmake bisa jadi: statis atau dinamis.
var docDefinition = {
header: 'simple text',
footer: {
columns: [
'Left part',
{ text: 'Right part', alignment: 'right' }
]
},
content: (...)
};
Untuk konten yang dibuat secara dinamis (termasuk jumlah halaman dan jumlah halaman), Anda dapat mengirimkan sebuah fungsi ke header atau footer:
var docDefinition = {
footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
header: function(currentPage, pageCount) {
// you can apply any logic and return any valid pdfmake element
return { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' };
},
(...)
};
Demikian artikel dari postingan gue yang kedua, gue harap dapat membantu siapapun yang ingin mendevelop aplikasi berbasis javascript.
REFERENCE :
REFERENCE :
No comments:
Post a Comment