Javascript - 用 Woocommerce 订单表数据填充 PDF 上的 HTML 表答案

【问题标题】：Javascript - Fill HTML table on PDF with Woocommerce order table dataJavascript - 用 Woocommerce 订单表数据填充 PDF 上的 HTML 表
【发布时间】：2021-05-21 16:02:02
【问题描述】：

我正在开发一种使用 javascript 将 Woocommerce 订单数据导出到 PDF 文档表的方法。为此，我将每个订单表单元格的 innerText 值存储在不同的 let 变量中及以后使用这些变量来填充 HTML 表格，该表格将出现在我的最终 PDF 文档中。

我感觉自己已经接近金牌了，但我在浏览器上收到Uncaught TypeError: Cannot read property 'innerText' of undefined 的控制台错误。

到目前为止，这是我的代码，知道为什么我会收到此错误以及我可以修复它的任何方法吗？

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 表的打印件。

【问题讨论】：

标签： javascript wordpress pdf woocommerce woocommerce-theming

【解决方案1】：

在您的循环中，您不需要使用条件<=（小于或等于），因为您从 0 开始（因为它是一个数组索引），只需在这些中使用 <（小于）案例。

另外，你应该使用iframe来放置你想要打印的内容，我不明白你使用的window.frames逻辑。

我测试了 sn-p 并且它可以工作：

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);
}

【讨论】：