Question

所以我正在尝试使用localStorage项目并将其输出到PDF文档中，该文档利用jsPDF库来制作用户购物车的发票。目前我可以打印项目名称但是它们在彼此上面被刷新，而且价格输出工作不正确。我在下面的截图中显示了这一点。它似乎也输出文本“PRICE”作为第一个元素而不是37.21

HTML

    <a id="itemName" class ="itemName">[ITEM_NAME]</a>

    <div class="item-price" id="itemPrice">[ITEM_PRICE] </div>

JS

$(document).on('click', '#submit1', function() {
        var itemToStore = document.getElementsByClassName("itemName");
        var itemPrices = document.getElementsByClassName("item-price");
        var itemName;
        var itemPrice;
        localStorage.setItem("itemToStore", JSON.stringify(itemToStore));
        localStorage.setItem("itemPrices", JSON.stringify(itemPrices));
        for (var i = 0; i < itemToStore.length; i++) {
            itemName = i temToStore[i].innerText;
            itemPrice = i temPrices[i].innerText;
            console.log("Item: " + itemName + itemPrice);
        }
        var pdf = n ew jsPDF(
            'p', 'pt', 'a4'); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. 



  for (var i=0 ; i < itemToStore .length; i++) { itemName=itemToStore [i].innerText; pdf.text(10,10, `Name` + itemName + itemPrice);
        }
pdf.save('Test.pdf');
});

PDF的输出

console.log的输出

Answer 1

我建议使用：https://github.com/simonbengtsson/jsPDF-AutoTable以更好的方式打印您的数据，例如来自网站：

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "country"}, 
    ...
];
var rows = [
    {"id": 1, "name": "Shaw", "country": "Tanzania", ...},
    {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...},
    {"id": 3, "name": "Garcia", "country": "Madagascar", ...},
    ...
];

// Only pt supported (not mm or in)
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, rows, {
    styles: {fillColor: [100, 255, 255]},
    columnStyles: {
        id: {fillColor: 255}
    },
    margin: {top: 60},
    addPageContent: function(data) {
        doc.text("Header", 40, 30);
    }
});
doc.save('table.pdf');

所以，您可以更改代码，如：

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Price", dataKey: "price"},
]
var rows = [
    {"id": 1, "name": "ObjectName", "price": "40", ...},
    {"id": 2, "name": "ObjectName2", "price": "50", ...},
];

正确地将本地存储项目格式化为jdPDF文档

1 个答案: