easyinvoice

Easily create beautiful pdf invoices.

Usage no npm install needed!

<script type="module">
  import easyinvoice from 'https://cdn.skypack.dev/easyinvoice';
</script>

README

Easy Invoice logo

Version Build Status Coverage Status
Downloads License Pull Request's Welcome

If this package helped you out please star us on Github!
Much appreciated!
Pull Request's Welcome

Features

  • Create invoices
  • List, get, update, delete invoices (api ready / npm in progress)
  • Create, list, get, update, delete clients (api ready / npm in progress)
  • More soon...

Demo

JS Fiddle: Plain Javascript
JS Fiddle: Vue
JS Fiddle: React
JS Fiddle: Angular

Installing

Using npm:

$ npm install easyinvoice --save

Using yarn:

$ yarn add easyinvoice

Using unkpg CDN:

<script src="https://unpkg.com/easyinvoice/dist/easyinvoice.min.js"></script>

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/easyinvoice/dist/easyinvoice.min.js"></script>

Import

Html

<script src="https://unpkg.com/easyinvoice/dist/easyinvoice.min.js"></script>

NodeJS

var easyinvoice = require('easyinvoice');

Vue/React

import easyinvoice from 'easyinvoice';

Angular

import * as easyinvoice from 'easyinvoice';
//ór (not both)
import { easyinvoice } from 'easyinvoice';

Example (NodeJS)

//Import the library into your project
var easyinvoice = require('easyinvoice');

var data = {
    //"documentTitle": "RECEIPT", //Defaults to INVOICE
    //"locale": "de-DE", //Defaults to en-US, used for number formatting (see docs)
    "currency": "USD", //See documentation 'Locales and Currency' for more info
    "taxNotation": "vat", //or gst
    "marginTop": 25,
    "marginRight": 25,
    "marginLeft": 25,
    "marginBottom": 25,
    "logo": "https://www.easyinvoice.cloud/img/logo.png", //or base64
    //"logoExtension": "png", //only when logo is base64
    "sender": {
        "company": "Sample Corp",
        "address": "Sample Street 123",
        "zip": "1234 AB",
        "city": "Sampletown",
        "country": "Samplecountry"
        //"custom1": "custom value 1",
        //"custom2": "custom value 2",
        //"custom3": "custom value 3"
    },
    "client": {
        "company": "Client Corp",
        "address": "Clientstreet 456",
        "zip": "4567 CD",
        "city": "Clientcity",
        "country": "Clientcountry"
        //"custom1": "custom value 1",
        //"custom2": "custom value 2",
        //"custom3": "custom value 3"
    },
    "invoiceNumber": "2021.0001",
    "invoiceDate": "1.1.2021",
    "products": [
        {
            "quantity": "2",
            "description": "Test1",
            "tax": 6,
            "price": 33.87
        },
        {
            "quantity": "4",
            "description": "Test2",
            "tax": 21,
            "price": 10.45
        }
    ],
    "bottomNotice": "Kindly pay your invoice within 15 days.",
    //Used for translating the headers to your preferred language
    //Defaults to English. Below example is translated to Dutch
    // "translate": { 
    //     "invoiceNumber": "Factuurnummer",
    //     "invoiceDate": "Factuurdatum",
    //     "products": "Producten", 
    //     "quantity": "Aantal", 
    //     "price": "Prijs",
    //     "subtotal": "Subtotaal",
    //     "total": "Totaal" 
    // }
};

//Create your invoice! Easy!
easyinvoice.createInvoice(data, function (result) {
    //The response will contain a base64 encoded PDF file
    console.log(result.pdf);
});

Locales and currency

Used for number formatting and the currency symbol:

//E.g. for Germany, prices would look like 123.456,78 €
const data = { locale: 'de-DE', currency: 'EUR'};

//E.g. for US, prices would look like $123,456.78
const data = { locale: 'en-US', currency: 'USD'};

Formatting and symbols are applied through the ECMAScript Internationalization API

Click here for a list of locale codes
Click here for a list of currency codes

Disclaimer: Not all locales and currency codes found in the above lists might be supported by the ECMAScript Internationalization API.

Async/await support

const result = await easyinvoice.createInvoice(data);
console.log(result.pdf);

To store the file locally (NodeJS)

var fs = require('fs');

const data = {};
const result = await easyinvoice.createInvoice(data);                       
await fs.writeFileSync("invoice.pdf", result.pdf, 'base64');

Download your invoice (browser only)

Using callback

const data = {};
easyinvoice.createInvoice(data, function (result) {
    easyinvoice.download('myInvoice.pdf', result.pdf);
    //	you can download like this as well:
    //	easyinvoice.download();
    //	easyinvoice.download('myInvoice.pdf');   
});

Using async/await

const data = {};
const result = await easyinvoice.createInvoice(data);                       
easyinvoice.download('myInvoice.pdf', result.pdf);
//	you can download like this as well:
//	easyinvoice.download();
//	easyinvoice.download('myInvoice.pdf');

Render(view) your invoice (browser only)

html

<!-- Only include when rendering is required -->
<script src="https://unpkg.com/pdfjs-dist/build/pdf.min.js"></script>
<script src="https://unpkg.com/pdfjs-dist/build/pdf.worker.min.js"></script>

<!-- Include pdfjs version 2.3.200 for Internet Explorer compatibility, no worker required -->
<!-- <script src="https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.min.js"></script> -->

<!-- The pdf will be rendered within this div -->
<div id="pdf"></div>

css (optional)

#pdf {
  text-align: center;
}

#pdf canvas {
  border: 1px solid black;
  width: 95%;
}

js: Using Callback

var data = {};
var elementId = 'pdf';
easyinvoice.createInvoice(data, function(result) {
    easyinvoice.render(elementId, result.pdf, function(){
        console.log('Invoice rendered!');
    });
});

js: Using async/await

const data = {}; 
const elementId = 'pdf'; 
const result = await easyinvoice.createInvoice(data);      
await easyinvoice.render(elementId, result.pdf);

You could view your base64 pdf through the following website: https://base64.guru/converter/decode/pdf

Paste the base64 string and click 'Decode Base64 to PDF'.