Node.js Canvas的toBuffer方法缓存导致生成PDF重复问题排查

• 核心问题出在node-canvas的PDF模式运行逻辑上，和你用同步还是异步的文件写入方法没有关系。当你调用canvas.toBuffer('application/pdf')导出PDF时，方法内部会直接终结当前canvas的PDF文档流，第一次导出完成后，你后续对绘图上下文ctx做的所有修改都不会被写入PDF流，所以第二次调用toBuffer拿到的还是第一次已经生成完成的PDF内容，自然两个文件内容完全一致。

因为你需要生成两个独立的PDF文件，所以每个文件都要创建单独的canvas实例，不要复用同一个：

const fs = require('fs');
const {createCanvas} = require('canvas');

const canvasWidth = 768;
const canvasHeight = 1056;

// 生成第一个PDF
const canvas1 = createCanvas(canvasWidth, canvasHeight, 'pdf');
const ctx1 = canvas1.getContext('2d');
ctx1.fillText('Some text 1', 50, 50);
const buffer1 = canvas1.toBuffer('application/pdf');
fs.writeFileSync(`../foo-1.pdf`, buffer1);

// 生成第二个PDF，新建独立canvas实例
const canvas2 = createCanvas(canvasWidth, canvasHeight, 'pdf');
const ctx2 = canvas2.getContext('2d');
ctx2.fillText('More text 2', 150, 50);
const buffer2 = canvas2.toBuffer('application/pdf');
fs.writeFileSync(`../foo-2.pdf`, buffer2);

如果你后续有生成单PDF多页的需求，可以调用ctx.addPage(canvasWidth, canvasHeight)方法新增页面，不需要新建多个canvas实例。

内容的提问来源于stack exchange，提问作者Merger