將本地存儲項目正確格式化到jdPDF文檔中

Question

因此，我正在嘗試使用localStorage項並將其輸出到使用jsPDF庫的PDF文檔中，目的是為用戶購物車開具發票。 目前，我可以打印商品名稱，但是它們會被彼此混淆，而且價格輸出工作不正確。 我已經在下面的屏幕截圖中顯示了這一點。 似乎還會輸出文本“ 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", ...},
];