Giter Site home page Giter Site logo

lorenzinigiovanni / simple-pdf-generator Goto Github PK

View Code? Open in Web Editor NEW
14.0 2.0 0.0 496 KB

Generator of PDF files from HTML templates using TS decorators

Home Page: https://www.npmjs.com/package/simple-pdf-generator

License: MIT License

TypeScript 79.55% HTML 1.71% JavaScript 18.74%
pdf pdf-generation html html5 html-template print decorators

simple-pdf-generator's Introduction

Simple PDF Generator

Node module that converts HTML5 files to PDFs.

Installation

This is a Node.js module available through the npm registry. Before installing, download and install Node.js.

Installation is done using the npm install command:

$ npm install simple-pdf-generator

Features

Simple PDF Generator:

  • supports custom CSS and JS;
  • fills custom fields in the HTML template;
  • can generate dynamic tables automatically.

Quick Start

In order to have a template you must create a class that extends the PdfFiller abstract class:

import path from 'path';
import { PdfField, PdfFiller, PdfTable, PdfTemplate } from 'simple-pdf-generator';

@PdfTemplate({
    templatePath: path.join(__dirname, 'template.html'),
})
export class Template extends PdfFiller {
    @PdfField()
    firstField = '';

    @PdfField()
    secondField = '';
}

And add the HTML file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <div class="container-fluid">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-10 text-center">
                        <h1>Hello %%firstField%%</h1>
                        <h2>Welcome in %%secondField%%</h2>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Then it's finally possible to use the template by calling the fill() method in order to generate the PDF:

import path from 'path';
import { Template } from './Template';

(async () => {
    const doc = new Template();

    doc.firstField = 'World';
    doc.secondField = 'Simple PDF Generator';

    await doc.fill(path.join(__dirname, 'doc.pdf'));
})();

Generate Tables

To generate a table you must to use the PdfTable decorator on your data property:

import path from 'path';
import { PdfField, PdfFiller, PdfTable, PdfTemplate } from 'simple-pdf-generator';

interface TableRow {
    index: number;
    name: string;
    surname: string;
    email: string;
}

@PdfTemplate({
    templatePath: path.join(__dirname, 'template.html'),
})
export class Template extends PdfFiller {
    @PdfField()
    field = '';

    @PdfTable()
    data = new Array<TableRow>();
}

In the HTML file write this:

<inject-table items="data" class="table">
    <inject-column prop="index" label="#" />
    <inject-column prop="name" label="Name" />
    <inject-column prop="surname" label="Surname" />
    <inject-column prop="email" label="Email" />
</inject-table>

And then, as above, use the fill() method like this:

import path from 'path';
import { Template } from './Template';

(async () => {
    const doc = new Template();

    doc.field = 'World';

    doc.tableData = [
        { index: 1, name: 'James', surname: 'Smith', email: '[email protected]' },
        { index: 2, name: 'Robert', surname: 'Johnson', email: '[email protected]' },
    ];

    await doc.fill(path.join(__dirname, 'doc.pdf'));
})();

Include CSS an JS Files

Through the class decorator is possible to include CSS and JS files. Do not import them in the HTML file, they will be automatically imported from the @PdfTemplate() decorator includes[] property.

import path from 'path';
import { PdfField, PdfFiller, PdfTable, PdfTemplate } from 'simple-pdf-generator';

@PdfTemplate({
    templatePath: path.join(__dirname, 'template.html'),
    includes: [{ path: path.join(__dirname, 'template.css') }, { path: path.join(__dirname, 'template.js') }],
})
export class Template extends PdfFiller {
    @PdfField()
    firstField = '';

    @PdfField()
    secondField = '';
}

Options

PdfFiller

Extend abstract class PdfFiller and use the following decorators on the properties:

Decorator HTML use
PdfField %%propertyName%%
PdfTable <inject-table items="propertyName">
    <inject-column prop="name" label="Name"/>
    <inject-column prop="surname" label="Surname"/>
</inject-table>

fill

PdfFiller fill() method returns the buffer of the PDF file.

Parameter Description
outputPath: string PDF output dir
pdfOptions: puppeteer.PDFOptions Object with Puppeteer PDF Options

PdfFiller fill() method accept two optional parameters:

  • the outputPath for the generated file;
  • the pdfOptions that accept Puppeteer PDF Options;

PdfTemplate

Use: decorator to be applied to PdfFiller class.

Parameter Description
templatePath: string Path to the HTML file
pdfOptions: puppeteer.PDFOptions Object with Puppeteer PDF Options
xssProtection: boolean Enable or disable XSS protection (default: true)
includes: Asset[] Assets (css and js) to be included in the HTML file
export interface Asset {
    path?: string;
    content?: string;
    type?: 'css' | 'js';
}

Puppeteer PDF Options

For Puppeteer PDF Options look at their documentation, we show only a brief example:

pdfOptions = {
    background: true,
    displayHeaderFooter: true,
    headerTemplate: `
    <style>
        div { margin-left: 15px !important }
    </style>                
    <div>Header</div>
    `,
    footerTemplate: `          
    <div>Footer</div>
    `,
    margin: {
        top: '5cm',
        bottom: '4cm',
        left: '1cm',
        right: '1cm',
    },
};

Puppeteer PDF Options used in the decorator of the class.

@PdfTemplate({
    templatePath: path.join(__dirname, 'template.html'),
    includes: [{ path: path.join(__dirname, 'template.css') }, { path: path.join(__dirname, 'template.js') }],
    pdfOptions: pdfOptions,
})
export class Template extends PdfFiller {
    @PdfField()
    firstField = '';

    @PdfField()
    secondField = '';
}

Puppeteer PDF Options passed to fill method.

const doc = new Template();

doc.firstField = 'World';
doc.secondField = 'Simple PDF Generator';

doc.fill(path.join(__dirname, 'doc.pdf'), pdfOptions);

Environment variables

It's possible to use environment variables to modify the behaviour of the library.

Environment variable Possible values Description
PUPPETEER_NO_HEADLESS true, false Used to run Chromium in non headless mode.
PUPPETEER_NO_SANDBOX true, false Used to run Chromium in containers where a root user is used.
PUPPETEER_PRODUCT chrome, firefox Specify which browser to download and use.
PUPPETEER_CHROMIUM_REVISION a chromium version Specify a version of Chromium you’d like Puppeteer to use.
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true, false Puppeteer will not download the bundled Chromium. You must provide PUPPETEER_EXECUTABLE_PATH.
PUPPETEER_EXECUTABLE_PATH a path Specify an executable path to be used in puppeteer.launch. To be specified if PUPPETEER_SKIP_CHROMIUM_DOWNLOAD is set to true.
HTTP_PROXY, HTTPS_PROXY, NO_PROXY proxy url Defines HTTP proxy settings that are used to download and run Chromium.

People

This library is developed by:

License

MIT

simple-pdf-generator's People

Contributors

lorenzinigiovanni avatar massimiliano-solutiontech avatar

Stargazers

Gurshan avatar Dzianis Kavalchuk avatar Kawsar Hossain avatar LarryLit2l avatar  avatar Diego Planchenstainer avatar Heng-Shiou Sheu avatar  avatar Pankaj Mane avatar Simone Luchetta avatar Nicolò avatar Markus Schicker avatar  avatar

Watchers

 avatar  avatar

simple-pdf-generator's Issues

Not working on cloud Linux Server

Failed to launch the browser process! spawn /home/node/node_modules/puppeteer/.local-chromium/linux-1002410/chrome-linux/chrome ENOENT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.