Правильное форматирование элементов локального хранилища в документе jdPDF - PullRequest
Новая
       9

Правильное форматирование элементов локального хранилища в документе jdPDF

0 голосов
/ 23 мая 2018

Итак, я пытаюсь взять элементы 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

screenshot of the pdf

Вывод файла console.log

console.log output

1 Ответ

0 голосов
/ 23 мая 2018

Я бы предложил использовать: 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", ...},
];
...