如何在jsPDF循环中用变量调整像素位置实现换行打印

你的代码有三个关键问题导致所有内容打印在同一位置：

• 变量i在循环内部声明，每次迭代都会重置为80，无法实现累加
• i =+ 15是语法错误，这是把i赋值为15，不是累加15，正确写法是i += 15
• item.label的y坐标写死为100，不会随行数变化

修正后的代码如下：

// 把i的初始化移到循环外部，保证每次迭代能累加
var i = 80;
data.forEach(item => {
    pdf.text(item.color, 15, i);
    // 让label的y坐标和color保持同步，实现同行列对齐
    pdf.text(item.label, 65, i);
    // 正确累加行高，控制每行的垂直间距
    i += 15;
});

如果需要color和label之间有垂直间距（比如label在color下方），可以调整label的y坐标并增大行高：

var i = 80;
data.forEach(item => {
    pdf.text(item.color, 15, i);
    pdf.text(item.label, 65, i + 5); // 让label比color低5像素
    i += 20; // 调整行高为20，留出足够的垂直空间
});

这样循环时每次打印的y坐标都会逐步增加，实现文本换行分开显示的效果。

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