在PDF添加PNG图片和的NodeJS jspdf
问题描述:
我非常新的nodeJs
我试图创建jsPdf
服务器上的PDF文件。在PDF添加PNG图片和的NodeJS jspdf
我已经安装使用npm install jspdf --save
作为的NodeJS合乎理具有将其在jspdf用于atob
支持jspdf,我加
npm install atob --save
并加入
var atob = require('atob');
var PNG = require('png-js');
其中需要为png-js
在jspdf
增加PNG文件。 当我尝试PNG文件与下面的代码
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");
}
});
以下错误触发
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)
什么我错过了添加到PDF?它适用于JPEG图像。从日志
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...QmCC
答
图像数据与jsPDF图书馆工作过,并偶然发现了错误,与具有无效的imageData输入格式,我建议你添加日志记录,以确定的imageData的格式如下:
let imgData=request.payload.canvasobj;
console.log(imgData);
确保格式是:
data:image/png;base64,...
其中......是以base64编码的图像数据。
编辑 我在本地设置了jsPDF。为了获得jspdf包(从NPM)在Node.js的4.x的工作,我必须做到以下几点:
global.PNG = require('png-js');
global.window = {document: {createElementNS:() => {return {}} }};
global.navigator = {};
global.atob = require('atob');
再接着成功创建jsPDF对象。
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");
}
});
我想我是不是能复制你原来的问题,因为安装需要非浏览器环境一些调整。
图像数据是完美的我已经添加了有关图像数据的一瞥 – DharanBro
我已经更新了我的答案,有一个自己的例子,必须创建一些全局变量供库使用。请参见。 –
股票'PNG-js'不完全与'jspdf'工作。我已经修改从'配备'jspdf' png.js'了'PNG-js'。也为我的文件,我在我的应用程序需要更多的DOM功能使用'jsdom'。 – DharanBro