js控制导出table的样式

JavaScript 控制导出表格（table）样式主要涉及到两个方面：一是如何在 JavaScript 中操作 DOM 来修改表格的样式；二是如何将带有样式的表格导出为文件，如 CSV 或 Excel。

基础概念

DOM 操作：JavaScript 可以通过 Document Object Model (DOM) 接口来修改 HTML 文档的结构、样式和内容。

导出文件：通常使用 Blob 对象和 URL.createObjectURL 方法来创建一个下载链接，用户点击后可以下载文件。

类型

内联样式：直接在 HTML 元素上设置 style 属性。
外部样式表：通过 <link> 标签引入 CSS 文件。
内部样式表：在 <head> 部分使用 <style> 标签定义样式。

应用场景

数据报告：生成专业的、格式化的报告。
数据分析：在网页上展示并导出分析结果。
用户交互：根据用户的操作实时更新表格样式。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 控制表格样式并导出为 CSV 文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export Table with Style</title>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
</head>
<body>

<table id="myTable" border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>John Doe</td><td>30</td></tr>
  <tr><td>Jane Smith</td><td>25</td></tr>
</table>

<button onclick="exportTableToCSV()">Export to CSV</button>
<button onclick="highlightRow(1)">Highlight Row 2</button>

<script>
function highlightRow(rowIndex) {
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    if (i === rowIndex) {
      rows[i].classList.add('highlight');
    } else {
      rows[i].classList.remove('highlight');
    }
  }
}

function exportTableToCSV() {
  var table = document.getElementById('myTable');
  var csv = [];
  for (var i = 0; i < table.rows.length; i++) {
    var row = [], cols = table.rows[i].cells;
    for (var j = 0; j < cols.length; j++) {
      row.push(cols[j].innerText);
    }
    csv.push(row.join(','));
  }
  var csvFile = new Blob([csv.join('\n')], {type: 'text/csv'});
  var downloadLink = document.createElement('a');
  downloadLink.download = 'table.csv';
  downloadLink.href = URL.createObjectURL(csvFile);
  downloadLink.click();
}
</script>

</body>
</html>

遇到的问题及解决方法

问题：导出的 CSV 文件中样式丢失。

原因：CSV 文件是一种纯文本格式，不支持样式。

解决方法：如果需要保留样式，可以考虑导出为 Excel 文件（.xlsx），可以使用库如 SheetJS 来实现。

// 使用 SheetJS 导出为 Excel
function exportTableToExcel() {
  var wb = XLSX.utils.table_to_book(document.getElementById('myTable'));
  var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});
  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  }
  saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'table.xlsx');
}

请注意，上述代码中的 saveAs 函数需要通过 FileSaver.js 库来实现文件保存功能。