Javascript - 用 Woocommerce 訂單表數據填寫 PDF 上的 HTML 表

Question

我正在開發一種使用 javascript 將 Woocommerce 訂單數據導出到 PDF 文檔表的方法。 為此，我將每個訂單表單元格的 innerText 值存儲在不同的let變量中，然后使用這些變量填充 HTML 表，該表將出現在我的最終 PDF 文檔中。

我覺得我快要打金了，但我收到了一個控制台錯誤Uncaught TypeError: Cannot read property 'innerText' of undefined on browser。

到目前為止，這是我的代碼，知道為什么我會收到此錯誤以及我可以修復它的任何方法嗎？

function printData(){
    let orderTableData = document.getElementsByClassName("woocommerce_order_items")[0].innerHTML;
    let orderTableSize = document.getElementById("order_line_items"); 
    let tamanho = orderTableSize.rows.length;
    let orderPricesData = document.getElementsByClassName("wc-order-totals")[0].innerHTML;
    let orderItemName = document.getElementById("order_line_items").getElementsByClassName("name")[0].innerText;
    let orderItemPrice = document.getElementById("order_line_items").getElementsByClassName("item_cost")[0].innerText;
    let orderItemQtd = document.getElementById("order_line_items").getElementsByClassName("quantity")[0].innerText;
    let orderItemTotal = document.getElementById("order_line_items").getElementsByClassName("line_cost")[0].innerText;

    for(var j = 0; j <= tamanho; j++){
        window.frames["print_frame"].document.body.innerHTML = "<table border='1' width='100%'><tr><th>Item</th><th>Preço uni.</th><th>Qtd.</th><th>Total</th></tr><tr><td>" + document.getElementById("order_line_items").getElementsByClassName("name")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("item_cost")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("quantity")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("line_cost")[j].innerText + "</td></tr></table>";    
    }
                 
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}

我還將留下我用於測試的 Woocommerce 表的打印件。

Answer 1

在您的循環中，您不需要使用條件<= （小於或等於），因為您從 0 開始（因為它是一個數組索引），在這些情況下只需使用< （小於）。

另一件事，您應該使用 iframe 來放置您要打印的內容，我不明白您使用的 window.frames 邏輯。

我測試了那個片段並且它有效：

function printData(){
     let orderTableData = document.getElementsByClassName("woocommerce_order_items")[0].innerHTML;
     let orderTableSize = document.getElementById("order_line_items"); 
     let tamanho = orderTableSize.rows.length;
     let orderPricesData = document.getElementsByClassName("wc-order-totals")[0].innerHTML;
     let orderItemName = document.getElementById("order_line_items").getElementsByClassName("name")[0].innerText;
     let orderItemPrice = document.getElementById("order_line_items").getElementsByClassName("item_cost")[0].innerText;
     let orderItemQtd = document.getElementById("order_line_items").getElementsByClassName("quantity")[0].innerText;
     let orderItemTotal = document.getElementById("order_line_items").getElementsByClassName("line_cost")[0].innerText;

     let iframe = document.createElement('iframe');

     document.body.appendChild(iframe);

     iframe.style.display = 'none';
 
     for(var j = 0; j < tamanho; j++){
        iframe.contentDocument.body.innerHTML = "<table border='1' width='100%'><tr><th>Item</th><th>Preço uni.</th><th>Qtd.</th><th>Total</th></tr><tr><td>" + document.getElementById("order_line_items").getElementsByClassName("name")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("item_cost")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("quantity")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("line_cost")[j].innerText + "</td></tr></table>";   
     }
             
     iframe.contentWindow.focus();
     iframe.contentWindow.print();
     document.body.removeChild(iframe);
}