使用Node.js和jsPDF在PDF中添加PNG图像

Question

我对 nodeJs 还比较新手，正在尝试在服务器端使用 jsPdf 生成 PDF 文件。

我已经使用 npm install jspdf --save 命令安装了 jspdf。

由于 nodeJs 不支持 jspdf 中所使用的 atob，因此我执行了以下命令：

npm install atob --save 并添加了以下内容：

var atob = require('atob');
var PNG = require('png-js');

在使用jspdf添加png文件时，需要使用png-js。以下代码尝试将PNG文件添加到PDF中：

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)

我错过了什么？它在JPEG图像上运行良好。

日志中的图像数据

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...QmCC

- dharanbro

Answer 1

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)

- user12452512

---

不鼓励只提供代码的答案。请点击 [编辑] 并添加一些总结您的代码如何解决问题的单词，或者解释您的答案与先前答案/答案的不同之处。[来自评论] - Nick

Answer 2

我曾经使用过jsPDF库，并遇到了无效的imageData输入格式的错误，我建议您按照以下方式添加日志来确定imageData的格式：

let imgData=request.payload.canvasobj;
console.log(imgData);

确保格式为：

data:image/png;base64,...

在这里，...是您的图像数据以base64编码的形式。

编辑 我在本地设置了jsPDF。为了让npm中的jspdf包在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");
    }
});

我认为我无法复制您原来的问题，因为在非浏览器环境中需要进行一些微调。

- Andre T

---

图像数据很完美，我已经添加了有关该图像数据的一瞥。 - dharanbro

我已经更新了我的答案，自己成功地运行了一个示例，不得不创建一些全局变量供库使用。请查看。 - Andre T

股票png-js与jspdf不完全兼容。我已经修改了从jspdf提供的png.js中的png-js。此外，为了在我的应用程序中需要更多的DOM功能，我使用了jsdom来处理文档。 - dharanbro