1. Produk
  2.   PDF
  3.   JavaScript
  4.   PDFMake-Wrapper
 
  

Penciptaan Fail PDF melalui API JavaScript Percuma

Perpustakaan JavaScript Sumber Terbuka membolehkan menjana, mengedit & mencetak dokumen PDF, menambah jadual, imej & pengepala atau pengaki pada PDF.

Mencari perpustakaan yang mudah digunakan untuk mencipta dan mengurus dokumen PDF pada bahagian pelayan dan juga bahagian klien. PDFMake-Wrapper boleh menjadi pilihan terbaik untuk mengendalikan dokumen PDF anda di dalam aplikasi JavaScript anda sendiri dengan usaha yang lebih kecil dan kos yang lebih rendah. Ia adalah perpustakaan JavaScript tulen sumber terbuka yang memberi jurutera perisian keupayaan untuk menjana dokumen dan laporan PDF yang berguna tanpa sebarang pergantungan luaran.

Pustaka PDFMake-Wrapper telah menyertakan sokongan untuk beberapa ciri asas serta lanjutan penting yang berkaitan dengan penciptaan dan pengurusan dokumen PDF, seperti pembalut baris, penjajaran teks, menggunakan jidar, mencipta & menggunakan gaya, menggunakan jadual dan lajur, klien/ percetakan PDF sebelah pelayan, masukkan pengepala dan pengaki halaman, kiraan halaman, pemisah halaman tersuai, pembenaman fon, jadual kandungan, ekstrak metadata PDF dan banyak lagi. Ia adalah perpustakaan pembalut yang menyediakan fungsi untuk membangunkan dokumen PDF dengan cara yang mudah dan lebih pantas. Satu ciri hebat PDFMake-Wrapper ialah ia telah menggunakan pendekatan deklaratif, yang memberikan pengguna keupayaan untuk memfokuskan pada perkara yang ingin mereka capai dengan mudah. Perpustakaan ini sangat stabil dan boleh digunakan dengan mudah pada sisi pelanggan serta pelayan.

Previous Next

Bermula dengan PDFMake-Wrapper

PDFMake-Wrapper tersedia di npm, Anda boleh memuat turun dan memasangnya dengan mudah pada mesin anda. Untuk menggunakan perpustakaan ini, anda perlu memasang tiga pakej ini.

Pasang PDFMake melalui npm

npm install pdfmake --save

@types/pdfmake mengandungi jenis untuk pdfmake untuk mengelakkan ralat menaip.

npm install @types/pdfmake --save-dev

Pasang pdfmake-wrapper melalui npm<

npm install pdfmake-wrapper --save

Cipta & Urus Dokumen PDF melalui JavaScript

Pustaka PDFMake-Wrapper sumber terbuka ialah pilihan terbaik untuk menjana dokumen PDF dalam JavaScript. Ia membenarkan pembangun perisian mencipta dokumen PDF dalam penyemak imbas (sebelah klien) dan dalam Node.js (sebelah pelayan) dengan hanya beberapa baris kod JavaScript. Setelah fail PDF dibuat, anda juga boleh mengubah suainya serta memasukkan teks, membenamkan fon dan grafik, pilih dan gunakan daripada pelbagai gaya, masukkan imej luaran dan banyak lagi. Anda juga boleh membuat fail PDF daripada HTML, tetapi anda memerlukan html2canvas untuk itu.

Cara Membuat Fail PDF daripada HTML melalui JavaScript


html2canvas(document.getElementById('exportthis'), {
  onrendered: function (canvas) {
    var data = canvas.toDataURL();
    var docDefinition = {
      content: [{
        image: data,
        width: 500,
      }]
    };
    pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
  }
});

Penambahan Pengepala & Pengaki pada Fail PDF melalui JavaScript

Pustaka PDFMake-Wrapper sumber terbuka memudahkan pembangun perisian menambah pengepala serta pengaki di dalam dokumen PDF mereka dengan hanya beberapa baris kod. Ia juga boleh menggunakan imej di dalam bahagian pengepala/pengaki. Anda juga boleh menambah kandungan lain seperti nombor halaman, logo syarikat, nama pengarang, kiraan halaman, saiz halaman, dll. pada bahagian pengepala/pengaki. Anda juga boleh menggunakan pelbagai jenis penggayaan dan pemformatan. Lebih baik gunakan penggayaan sebaris apabila diperlukan di bahagian pengepala atau pengaki.

Sisipkan & Urus Jadual dalam PDF melalui Perpustakaan JS

Pustaka PDFMake-Wrapper telah menyediakan sokongan lengkap untuk menggunakan jadual di dalam dokumen PDF. Ia menyediakan pelbagai ciri berguna untuk mengurus jadual kompleks di dalam aplikasi JavaScript, seperti mencipta jadual baharu dari awal, menambah pengepala untuk jadual, mengubah saiz jadual sedia ada, menambah format pada pengepala, memasukkan sel baharu, menggabungkan lajur dan sel, menggunakan gaya pada jadual, dan sebagainya.

Bagaimana untuk Menggabungkan Lajur dalam Jadual PDF melalui JS API?

new Table([
    [
        new Txt('Name').bold().end,
        new Txt('Address').bold().end,
        new Txt('Email').bold().end,
        new Txt('Phone').bold().end
    ],
    [new Cell(new Txt('A').end).colSpan(4).end, null, null, null],
    ['Anastasia', 'Some direction 1', 'anastasia@domain.com', '123 4566 187'],
    ['Alexander', 'Some direction 2', 'alexander@domain.com', '123 4566 187'],
    [new Cell(new Txt('C').end).colSpan(4).end, null, null, null],
    ['Clementine', 'Some direction 3', 'clementine@domain.com', '123 4566 187'],
    ['Chelsey', 'Some direction 4', 'chelsey@domain.com', '123 4566 187'],
    [new Cell(new Txt('N').end).colSpan(4).end, null, null, null],
    ['Nicholas', 'Some direction 5', 'nicholas@domain.com', '123 4566 187'],
])
.widths(...)
.heights(...)
.end;

Lukis Vektor dalam PDF melalui API JavaScript

Pustaka P PDFMake-Wrapper membolehkan pembangun perisian melukis bentuk vektor di dalam dokumen PDF dengan mudah. Untuk melukis vektor dalam fail PDF, ia diperlukan untuk mencipta kanvas di mana vektor akan dilukis. Sila ingat bahawa pesanan penting pada kanvas, vektor terakhir akan berada di atas yang lain. Setelah dibuat, anda juga boleh mengubah saiznya mengikut keperluan anda sendiri dan menggantikannya dengan mudah.

Lukis Garis dalam PDF melalui JavaScript

import { Line } from '../../../src';
describe('Line definition class', () => {
    it('should be instanced', () => {
        const line = new Line(10, 10);
        expect( line.end ).toBeTruthy();
    });
    it('should be a simple line', () => {
        const line = new Line(10, 10).end;
        expect( line ).toEqual({ 
            type: 'line',
            x1: 10,
            y1: 10,
            x2: 10,
            y2: 10
        });
    });
    it('should be a line vector with full properties', () => {
        const line = new Line(10, 10)
            .color('red')
            .dash(5)
            .fillOpacity(0.1)
            .lineColor('blue')
            .lineWidth(3)
            .linearGradient(['green', 'yellow'])
            .lineCap('round')
            .end;
        expect( line ).toEqual({ 
            type: 'line',
            x1: 10,
            y1: 10,
            x2: 10,
            y2: 10,
            color: 'red',
            dash: { length: 5 },
            fillOpacity: 0.1,
            lineColor: 'blue',
            lineWidth: 3,
            linearGradient: ['green', 'yellow'],
            lineCap: 'round'
        });
    });
});
 Melayu