Skip to content

AndreKelling/jspdf-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jsPDF Template

This a styled invoice Template jsPDF in an ES6 / ECMAScript webpack setup.

Includes svg2pdf for better SVG support.

Here there is a demo.

Install

  1. npm install

If you want the usable node package, you can install it via npm:

npm i jspdf-invoice -S it is here https://www.npmjs.com/package/jspdf-invoice

Build

Creates a bundle JS file which provides the global method printPDF().

For demonstration a docs GitHub page is build.

  1. npm run build

Development

  1. npm run dev
  2. npm run serve

Publish

Is done via GitHub action.

  • raise version in dist/package.json

A copy of the src dir is taken as artifact for the node package in the dist dir.

Custom-Font file

I do use a custom font here. Which is prepared as base64 code like following: https://github.com/parallax/jsPDF#use-of-unicode-characters--utf-8

  1. My custom fonts are laying as .ttf font-files in src/fonts subdirectory.
  2. prepared JS script with the font's base64 code are in src/print/fonts
  3. they got a import { jsPDF } from 'jspdf'; added at the very top

Structure

  • Print components or template partials are placed in src/print/partials
  • fetchSvg and newPage are tools placed in src/print/utils

Image sizes

Images need to be SVG in here!

  • Logo Size: width="40" height="49"
  • Address-bar: width="668" height="56", which is scaled down to keep details
  • Background: width="733" height="528", which is centralised and hangs a bit over the edges

Issues