使用jsPDF将localStorage购物车内容生成PDF发票遇排版及价格异常

我来帮你定位并解决这两个问题：

问题1：商品名称重叠 #

你在循环生成PDF文本时，每次都使用了固定的y轴坐标10，导致所有商品的文本都打印在同一个位置，自然会重叠。解决办法是动态调整y轴位置，让每一行文本都向下偏移。

问题2：价格显示为"PRICE"而非实际数值 #

在生成PDF的循环中，你没有重新获取对应索引i的商品价格，而是复用了之前循环结束后itemPrice变量的最后值（刚好是页面上的"PRICE"文本）。另外，你尝试把DOM元素存到localStorage的操作是无效的——HTMLCollection无法被JSON.stringify正确序列化，存进去的数据无法正常使用，直接用获取到的DOM元素集合即可。

修正后的完整代码 #

$(document).on('click', '#submit1', function() { 
  var itemToStore = document.getElementsByClassName("itemName"); 
  var itemPrices = document.getElementsByClassName("item-price"); 

  // 移除无效的DOM元素存储操作
  // localStorage.setItem("itemToStore", JSON.stringify(itemToStore)); 
  // localStorage.setItem("itemPrices", JSON.stringify(itemPrices)); 

  var pdf = new jsPDF('p', 'pt', 'a4'); 
  var yPosition = 10; // 初始y轴坐标
  var lineHeight = 25; // 每行文本的高度，可根据字体大小调整

  for (var i = 0; i < itemToStore.length; i++) { 
    var itemName = itemToStore[i].innerText; 
    var itemPrice = itemPrices[i].innerText; 
    console.log("Item: " + itemName + itemPrice); 

    // 使用动态y坐标，确保每行文本不重叠
    pdf.text(10, yPosition, `Name: ${itemName}, Price: ${itemPrice}`); 
    yPosition += lineHeight; // 下移下一行的位置
  } 

  pdf.save('Test.pdf'); 
});

关键修改说明 #

1. 动态y坐标：通过yPosition变量控制每行文本的垂直位置，每次循环后增加lineHeight，让新的商品信息打印在上一行的下方。
2. 循环内重新获取价格：在PDF生成的循环内部，每次都获取对应索引的itemPrice，确保每个商品的价格和名称正确对应。
3. 移除无效存储：删除了将DOM元素存入localStorage的代码，避免无效操作。

如果需要对价格进行格式化（比如保留两位小数），可以对itemPrice做进一步处理，例如：

var formattedPrice = parseFloat(itemPrice.trim()).toFixed(2);
pdf.text(10, yPosition, `Name: ${itemName}, Price: $${formattedPrice}`);

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