PDFmake. Client/server side PDF printing in pure JavaScript | Goodpixelpro Tutorial

Goodpixelpro Tutorial – Baiklah dalam kesempatan saya kali ini dalam kuartal pertama pada tahun 2018 ini, pada postingan saya yang kedua ini saya ingin berbagi knowledge mengenai PDFmake yang kebetulan di projek si MERAH , tool ini di gunakan guna untuk ngeprint suatu isi dari container dalam html yang datanya berasal dari service dan dinamis, maka saya menggunakan tool ini karena murni menggunakan javascript dan mempunyai banyak fitur. OKEH langsung saja, gimana sih cara nginstallnya ?

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.

  1. Basics
    ———————————————————————-
    line-wrapping
    text-alignments left/right/centered/justified
    numbered and bulleted lists
    margins
    images and vector graphics
    ———————————————————————-

  2. Tables and Columns
    ———————————————————————-

    auto/fixed/star-sized/percentage columns
    col-spans and row-spans
    headers automatically repeated in case of a page-break
    non-breaking rows
    non-breaking sections keeping headers and rows together

    ———————————————————————-

  3. Styling
    ———————————————————————–

    convenient styling
    style inheritance
    custom style dictionaries

    ———————————————————————–

  4. Page Headers and Footers
    ———————————————————————–

    static or dynamic content
    page numbers
    page count

    ———————————————————————–

  5. Client-side Helper Methods
    ———————————————————————–

    open in another tab
    print auto-triggering print
    download with the specified filename

    ———————————————————————–

  6. Other
    ———————————————————————–

    page dimensions and orientations
    custom page breaks
    font embedding
    support for complex, multi-level (nested) structures

    ———————————————————————–

Gimana ? lumayan banyak kan ? hehehe…

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:

  <html lang='en'> <head> <meta charset='utf-8'> <title>my first pdfmake exampletitle> <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 gt;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.
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{8e23217919480e553a2d8c6ce42cb51e388f5545859dca3e681390c1e380b124}', 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 {8e23217919480e553a2d8c6ce42cb51e388f5545859dca3e681390c1e380b124} 2) ? 'left' : 'right' }; }, (...) };

Demikian artikel dari postingan gue yang kedua, gue harap dapat membantu siapapun yang ingin mendevelop aplikasi berbasis javascript.

REFERENCE :

Terimakasih telah berkunjung ke website Goodpixelpro. Semoga bermanfaat.!

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart