npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

jspdfmake

v2.2.3

Published

A wrapper for jsPdf that provides a nice api to generate pdf files in an easy and customizable way

Downloads

42

Readme

Javascript PDF maker

A lightweight wrapper built on top of jsPdf that provides a fast and easy API to generate large pdf text files. Similar to pdfmake, just focus on the content and how you want to display it.

Usage

import { JsPDFMake } from 'jspdfmake';

// Define your content paragraphs
const example = {
  content: [{
    text: 'Hello World',
    align: 'center',
  },
  {
    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa obcaecati quod dicta temporibus aperiam unde debitis. Consectetur ea nobis adipisci totam laborum! Nesciunt pariatur fugiat earum repellendus eaque soluta ut.',
  }]
};

// Create an instance
const maker = new JsPDFMake('My PDF', example);

// Download your PDF file
maker.download();

Below are the keys/values that could be passed to a paragraph

Alignments

  • align: String ['left', 'right', 'center'] / default = left

Fonts

  • fontSize: Number / default = 18
  • fontName: String ['times', 'helvitica', ...etc] / default = helvetica
  • fontStyle: String ['normal', 'light', 'bold'] / default = normal
  • textColor: String ['red', '#111', ...etc] / default = black

Custom fonts

  • Convert your font to base64
  • Export the addMyCustomFont function:
function addMyCustomFont(jsPDFAPI) {
  var font = 'YOUR BASE64 STRING';
  var callAddFont = function() {
    this.addFileToVFS('MyCustomFont.ttf', font);
    this.addFont('MyCustomFont.ttf', 'mycustomfont', 'normal');
  };
  jsPDFAPI.events.push(['addFonts', callAddFont]);
}

export default addMyCustomFont;
  • Add your font using the extendJsPDFAPI function
import { JsPDFMake, extendJsPDFAPI } from 'jspdfmake';
import addMyCustomFont from './myCustomFont.js';

extendJsPDFAPI((API) => {
  addMyCustomFont(API);
});
  • You can now use your custom font normally
const example = {
  content: {
    text: 'Hello World',
    fontName: 'mycustomfont',
  }
}

Margins

  • marginTop: Number / default = 0
  • marginRight: Number / default = 0
  • marginBottom: Number / default = 0
  • marginLeft: Number / default = 0

Page Breaks

  • pageBreak: String ['none', 'before', 'after'] / default = none

Highlighting

  • highlightColor - [Number] (RGB values of the color e.g [255, 255, 255] for white) / default = false

Bullet points

  • hasBullet - Boolean / default = false

Table of contents

Check the examples folder for a complete table of contents example

Header/Footer

You can render a header/footer for every page of your document using the renderStamp function

  const docDefinition = {
    content: [
      {
        text: `Feed: ${feed.name}\n`,
        fontSize: 16,
        fontName: 'avenir',
        textColor: 'black',
        align: 'center',
        marginTop: 105,
        marginBottom: 5,
      },
    ],
    renderStamp: (doc, pageNumber, { width, height }) => {
      // doc is the jsPdf document instance
      doc.text(
        `My custom footer text ${pageNumber}`,
        20,
        height - 20,
      );
    },
  };

FAQ

Why not just use jsPDF

jsPdf is awesome, however the API is very basic and you would have to go through lots of implementation details (e.g line breaks, page breaks, inline styles, font sizes, alignments...) to get a simple pdf text page.

For example this is the provided way to generate a text rendered in new lines according to jsPdf offical docs:

var pageWidth = 8.5,
  lineHeight = 1.2,
  margin = 0.5,
  maxLineWidth = pageWidth - margin * 2,
  fontSize = 24,
  ptsPerInch = 72,
  oneLineHeight = fontSize * lineHeight / ptsPerInch,
  text = 'LARGE TEXT GOES HERE',
  doc = new jsPDF({
  unit: 'in',
  lineHeight: lineHeight
}).setProperties({ title: 'String Splitting' });

// splitTextToSize takes your string and turns it in to an array of strings,
// each of which can be displayed within the specified maxLineWidth.

var textLines = doc
  .setFont('helvetica', 'neue')
  .setFontSize(fontSize)
  .splitTextToSize(text, maxLineWidth);

// doc.text can now add those lines easily; otherwise, it would have run text off the screen!
doc.text(textLines, margin, margin + 2 * oneLineHeight);

While here it's as simple as:

// Create your doc definetion
const example = {
  content: {
     text: "LARGE TEXT GOES HERE",
     fontSize: 24,
     fontName: 'helvetica',
     fontStyle: 'neue',
  }
}
// Create an instance and Generate the doc from the definition!
const  test  =  new  JsPDFMake('My PDF', example);

No need to worry about calculations or pixels computations details, just focus on the content and how you want to display it.