在 javascript output 中嵌入 html/css

Question

所有，我有这个 output，我正在将onclick导出到 excel：

const final = totalBatches.reduce((AB, now, idx) => {
let A1 = z(AB, 8);
let A2 = z(AB + now / 2 - 1, 8);
let B1 = z(AB + now / 2, 8);
let B2 = z(AB + now - 1, 8);
output += `Batch ${z(idx + 1, 2)}A | ${prefix} ${A1} - ${prefix} ${A2}\n`;
output += `Batch ${z(idx + 1, 2)}B | ${prefix} ${B1} - ${prefix} ${B2}\n`;
return AB + now;
}, init);

outputEl.innerHTML = output;
}

问题是，它需要格式化为单独的列，因此 excel 工作表的格式正确。 所以我将以下内容添加到output += ：

output += `\<tr\>\<td\>Batch ${z(idx + 1, 2)}A \</td\>\<td\>${prefix} ${A1} \</td\>\<td\>${prefix} ${A2}\</td\>\</tr\>\n`;
output += `\<tr style="border-bottom: 1px solid black;"\>\<td\>Batch ${z(idx + 1, 2)}B \</td\>\<td\>${prefix} ${B1} \</td\>\<td\>${prefix} ${B2}\</td\>\</tr\>\n`;

这（大部分）有效。 我的 excel 导出现在格式化为单独的列。 但至少有两个问题。 1，它丑陋/笨重且难以阅读......必须有一种更有效的方法来做到这一点。

2，我还没有找到一种方法让这个 output 具有内联样式，以便用户在导出前在 html 页面上获得视觉提示（我希望每隔一行加下划线或着色以方便阅读）。

我是幼儿园级别的 Javascript... 我是使用encodeURIComponent()还是其他全局方法？

我可以做类似的事情吗

let TD = fancy.encoded.stringInColumn;

为了使这个更清洁并正确格式化？ 感谢您的任何输入，非常感谢。

澄清一下：这也需要显示在 html 页面以及导出到 Excel 中。

---

Answer 1

也许您应该将 output 作为对象列表[每行作为一个对象]，然后转换为 html 表。 你可以定义一个 function 像：

function jsonToTable(jsOp, colNames){
    var op = '', rowHtml = '';
    for (let c=0; c<colNames.length; c++) {
        rowHtml += `<th>${colNames[c]}</th>`;
    }
    op += `<tr>${rowHtml}</tr>`;
    for (let r=0; r< jsOp.length; r++){
        rowHtml = ''; var rowData = jsOp[r];
        var rowStyle = i%2==0 ? '' : ' style="border-bottom: 1px solid black;';
        for (let c=0; c<colNames.length; c++) {
            var colName = colNames[c];
            rowHtml += `<td>${rowData[colName]}</td>`;
        }
        op += `<tr ${rowStyle}>${rowHtml}</tr>`;
    }
    return `<table>${op}</table>`;
}

然后只需调用output = jsonToTable(opObj, colHeaders); 从你的例子中我可以看到，你的opObj和colHeaders看起来像：

var opObj = [
    {
        'col1Name': `Batch ${z(idx + 1, 2)}A`,
        'col2Name': `${prefix} ${A1}`,
        'col3Name': `${prefix} ${A2}`,
    },
    {
        'col1Name': `Batch ${z(idx + 1, 2)}B`,
        'col2Name': `${prefix} ${B1}`,
        'col3Name': `${prefix} ${B2}`,
    }
]
var colHeaders = ['col1Name', 'col2Name', 'col3Name']

（据我所知，'<' 和 '>' 不需要用反斜杠转义。）

此外，如果您愿意使用 css 添加样式表或样式块，您可以看看这个条纹表示例，然后您可以放弃rowStyle位。

至少对我来说，这会使代码看起来更干净一些。