Reputation: 1342
I am pretty new to nodeJs
and I am trying create a pdf with jsPdf
on server.
I have installed the jspdf using npm install jspdf --save
As nodeJs doest have support for atob
which was used in jspdf, I have added
npm install atob --save
and added
var atob = require('atob');
var PNG = require('png-js');
where png-js
is required for adding png files in jspdf
.
When I try to add the PNG file to the pdf with following code
let imgData=request.payload.canvasobj;
let pdfContent = new jsPDF();
pdfContent.addImage(imgData, 'PNG', 40, 20, 0, 0);
let data = pdfContent.output('arraybuffer');
let buffer = Buffer.from(data);
let arraybuffer = Uint8Array.from(buffer);
fs.appendFile('./canvas.pdf', new Buffer(arraybuffer), function (err) {
if (err) {
console.log(err);
} else {
console.log("PDF created");
}
});
the following error is triggered
Debug: internal, implementation, error
TypeError: Uncaught error: Cannot read property 'buffer' of undefined
at Object.jsPDFAPI.processPNG (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\jspdf\dist\jspdf.debug.js:8796:80)
at Object.jsPDFAPI.addImage (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\jspdf\dist\jspdf.debug.js:4696:50)
at canvas (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\requestHandler.js:105:16)
at Object.internals.handler (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\lib\handler.js:99:36)
at request._protect.run (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\lib\handler.js:30:23)
at internals.Protect.run (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\lib\protect.js:59:12)
at exports.execute (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\lib\handler.js:24:22)
at each (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\lib\request.js:382:16)
at iterate (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\node_modules\items\lib\index.js:36:13)
at done (C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\hapi\node_modules\items\lib\index.js:28:25)
Debug: internal, implementation, error
TypeError: fn is not a function
at C:\LearningPro\NodeJsProjects\pdfexport-nodejs\node_modules\png-js\png-node.js:246:16
at Inflate.onEnd (zlib.js:227:5)
at emitNone (events.js:91:20)
at Inflate.emit (events.js:185:7)
at endReadableNT (_stream_readable.js:974:12)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickDomainCallback (internal/process/next_tick.js:122:9)
What do I am missing out? It works fine with JPEG Image.
image data from log
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...QmCC
Upvotes: 3
Views: 14223
Reputation: 101
var path_url = '/usr/logo.png', format = 'PNG';
//format 'JPEG', 'PNG', 'WEBP'
var imgData = fs.readFileSync(path_url).toString('base64');
var doc = new jsPDF();
doc.addImage(imgData, format, 0, 0, 5, 1)
Upvotes: 6
Reputation: 529
Having worked with the jsPDF library and stumbled upon errors with having the invalid imageData input format, I advise you to add logging to determine the format of imageData as follows:
let imgData=request.payload.canvasobj;
console.log(imgData);
Ensure that the format is:
data:image/png;base64,...
Where ... is your image data encoded in base64.
EDIT I set up jsPDF locally. In order to get the jspdf package (from npm) working in Node.JS 4.x, I had to do the following:
global.PNG = require('png-js');
global.window = {document: {createElementNS: () => {return {}} }};
global.navigator = {};
global.atob = require('atob');
Then went on to create the jsPDF object successfully.
var fs = require('fs');
var jsPDF = require('jspdf');
var imgData = fs.readFileSync('imgdata').toString();
var pdfContent = new jsPDF();
var ret = pdfContent.addImage(imgData, 'PNG', 40, 20, 0, 0);
var data = new Buffer(pdfContent.output('arraybuffer'));
fs.appendFile('./canvas.pdf', data, function (err) {
if (err) {
console.log(err);
} else {
console.log("PDF created");
}
});
I assume I was not able to replicate your original issue because the setup required some tweaks in non-browser environments.
Upvotes: 4