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

PDF Files Creation via Free JavaScript API

Open Source JavaScript Library allows to generate, edit & print PDF documents, add tables, images, & headers or footers to PDFs.

Looking for an easy-to-use library to create and manage PDF documents on the server-side as well as the client-side. PDFMake-Wrapper can be a great choice to handle your PDF documents inside your own JavaScript applications with smaller effort and lesser cost. It is an open source pure JavaScript library that gives software engineers the ability to generate useful PDF documents and reports without any external dependencies.

The PDFMake-Wrapper library has included support for several important basic as well as advanced features related to PDF documents creation and management, such as line-wrapping, text-alignments, using margins, creating & apply styles, using tables and columns, client/server-side PDF printing, insert page headers and footers, page count, custom page breaks, font embedding, table of content, extract PDF metadata and much more. It is a wrapper library that provides functionalities to develop PDF documents in an easy and faster way. One great feature of PDFMake-Wrapper is that it has adopted a declarative approach, which gives users the ability to easily focus on what they want to achieve. The library is very stable and can be easily used on the client as well as server side.

Previous Next

Getting Started with PDFMake-Wrapper

PDFMake-Wrapper is available at npm, You can easily download it and install it on your machine. To use this library you need to install these three packages.

Install PDFMake via npm

npm install pdfmake --save

@types/pdfmake contains the types for pdfmake to avoid typing errors.

npm install @types/pdfmake --save-dev

Install pdfmake-wrapper via npm<

npm install pdfmake-wrapper --save

Create & Manage PDF Documents via JavaScript

The open source PDFMake-Wrapper library is an excellent choice for generating PDF documents in JavaScript. It allows software developers to create PDF documents in the browser (client-side) and in Node.js (server-side) with just a couple of lines of JavaScript code. Once the PDF file is created you can also modify it as well as insert text, embed fonts and graphics, select and apply from various styles, insert external images, and much more. It is also possible to create a PDF file from HTML, but you will need html2canvas for that.

How to Create PDF File from HTML via 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");
  }
});

Headers & Footers Addition to PDF File via JavaScript

The open source PDFMake-Wrapper library makes it very easy for software developers to add the header as well as footer inside their PDF documents with just a few lines of code. It is also possible to use an image inside the header/footer section. It is also possible to add other content like page number, company logo, author name, page count, page size, etc. to the header/footer section. It is also possible to apply various kinds of styling and formatting. Better use inline styling whenever needed in the header or footer section.

Insert & Manage Tables inside PDF via JS Library

The PDFMake-Wrapper library has provided complete support for using tables inside PDF documents. It provides various useful features for managing complex tables inside JavaScript applications, such as creating new tables from the scratch, adding headers for tables, resizing existing tables, adding format to headers, inserting new cells, combining columns and cells, applying styles to tables, and so on.

How to Combining Columns in PDF Tables via 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;

Draw Vectors inside PDF via JavaScript API

The P PDFMake-Wrapper library enables software developers to draw vector shapes inside PDF documents with ease. To draw vectors in PDF files, it is required to create a canvas which is where vectors will be drawn. Please remember that the order matters on the canvas, the last vector will be on top of the others. Once created you can also resize it according your own needs and replace it with ease.

Draw Line inside PDF via 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'
        });
    });

});
 English