jsPDF Server Side node.js working solution

1

I installed and tried the basic demo as below

mkdir abc && cd $_
yarn init -y
yarn install
touch index.js

const jsPDF = require('jspdf/dist/jspdf.node.debug')

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

Which gave me this error,

/Users/Downloads/abc/node_modules/jspdf/dist/jspdf.node.debug.js:3543
window.tmp = jsPDF;
^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/Downloads/abc/node_modules/jspdf/dist/jspdf.node.debug.js:3543:1)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/Downloads/abc/index.js:1:77)
    at Module._compile (internal/modules/cjs/loader.js:721:30)

2

I amended the code by doing dummy object declarations for the node env.

global.window = {document: {createElementNS: () => {return {}} }};
global.navigator = {};
global.btoa = () => {};

const jsPDF = require('jspdf/dist/jspdf.node.debug')

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

error got updated to the following,

/Users/Downloads/abc/node_modules/jspdf/dist/jspdf.node.debug.js:3334
        saveAs(getBlob(buildDocument()), filename);
        ^
ReferenceError: saveAs is not defined
    at Object.API.save (/Users/Downloads/abc/node_modules/jspdf/dist/jspdf.node.debug.js:3334:9)
    at Object.<anonymous> (/Users/Downloads/abc/index.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
    at startExecution (internal/bootstrap/node.js:276:5)

3

I build the latest version of jsPDF and used that instead of build from npm.

const jsPDF = require('./dist/jspdf.node.debug')

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

which gave me the following error,

/Users/muhammadadeel/Downloads/abc/dist/jspdf.node.debug.js:3549
window.tmp = jsPDF;
^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/Downloads/abc/dist/jspdf.node.debug.js:3549:1)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/Downloads/abc/index.js:1:77)
    at Module._compile (internal/modules/cjs/loader.js:721:30)

🔢

There were previous issues but not as well documented as the one I have provided. Can you please suggest amends.

Solution

1. On the server side don’t use doc.save() declare dummy object references and remove them as below.
2. Also note, use the jspdf.node.min instead of plain jspdf referencing

global.window = {document: {createElementNS: () => {return {}} }};
global.navigator = {};
global.btoa = () => {};

const fs = require('fs')
const jsPDF = require('jspdf/dist/jspdf.node.min')

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)

fs.writeFileSync('./output.pdf', doc.output())
// doc.save('a4.pdf')

delete global.window;
delete global.navigator;
delete global.btoa;

[Uzlopak]

@pirasalbe I will update the examples. Be ready for surprises

[janteque]

Hi, I’m also trying to make it work on the server side, but it seems it does not works well when using custom fonts (I need then since I have to be able to display different languages, including RTL Arabic)

I’ve tryed several samples but the PDF shows an error in Acrobat and does not show the glyphs in Chrome.

I’ve modified the japanese sample: https://github.com/MrRio/jsPDF/blob/master/examples/js/japanese.js

global.window = {document: {createElementNS: () => {return {}} }};
global.navigator = {};
global.btoa = () => {};

var MouhitsuBold = "AAEAAAASAQAABAAgR1N...

const fs = require('fs');
const jsPDF = require('jspdf/dist/jspdf.node.min');

var doc = new jsPDF();

doc.addFileToVFS("MouhitsuBold.ttf", MouhitsuBold);
doc.addFont('MouhitsuBold.ttf', 'Mouhitsu', 'bold');
  
doc.setFont('Mouhitsu', 'bold'); // set font
doc.setFontSize(20);

doc.text("なに", 20, 20);
var data = doc.output();

fs.writeFileSync('./document.pdf', data);


delete global.window;
delete global.navigator;
delete global.btoa;

But I got an error in Acrobat "Cannot extract the embedded font ‘Mouhitsu’. Some characters may not display or print correctly. "

Also, I understand that in server side you could load the font by using directly doc.addFont('MouhitsuBold.ttf', 'Mouhitsu', 'bold'); Right?