JS json数据导出为Excel

利用html里table将json数据导出为excel(.xls)

将json数据组装到table标签里，可以在table及其子标签里进行css样式设置。
将table添加到html中，在html中加入excel和sheet元素
将html编码为excel文件，并进行下载

<script>
// 表头数据
let thead = [
  {text: 'ID', key: 'id'},
  {text: '姓名', key: 'name'},
  {text: '性别', key: 'sex'},
  {text: '身份证号', key: 'idCard'},
  {text: '出身日期', key: 'birthday'},
  {text: '年龄', key: 'age'},
  {text: '联系电话', key: 'tel'},
];

// 数据组装
let tbody = [];
let sexArr = ['男', '女'];
for (let i = 1; i <= 10; i++) {
  tbody.push({
    id: i,
    name: 'xx' + i,
    sex: sexArr[Math.round(Math.random())],
    idCard: '53010020001111234X',
    birthday: '2000/11/11',
    age: 21,
    tel: 13123456789
  });
}

// 表头数据组装，多级表头
let thData = [
  [{text: '人员信息表', colspan: thead.length}],
  [
    {text: 'ID', rowspan: 2},
    {text: '基本信息', colspan: thead.length - 1},
  ],
  thead.slice(1, thead.length)
];
exportExcel(thead, tbody, '人员信息表', thData);

exportExcel(thead, tbody, sheetName, thData) {
  /**
   * 将数据组装到table里
   * 增加\t为了不让表格显示科学计数法或者其他格式
   */
  let html = '';
  if (thData) { // 多级表头
    thData.map(list => {
      html += '</tr>';
      list.map(item => {
        html += `<th colspan="${item.colspan ? item.colspan : 1}" rowspan="${item.rowspan ? item.rowspan : 1}">`;
        html += item.text + '\t';
        html += '</th>';
      });
      html += '</tr>';
    });
  } else { // 单级表头
    html += '</tr>';
    thead.map(item => {
      html += `<th>`;
      html += item.text + '\t';
      html += '</th>';
    });
    html += '</tr>';
  }

  tbody.map(item => {
    html += '<tr>';
    thead.map(v => {
      html += '<td style="text-align: center;">';
      html += (item[v.key] ? item[v.key] : '') + '\t';
      html += '</td>';
    });
    html += '</tr>';
  });

  // 将table添加到html中，在html中加入excel和sheet元素
  let template = '';
  template += '<html lang="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">';
  template += '<head><title></title>';
  template += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
  template += '<x:Name>';
  template += sheetName;
  template += '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions>';
  template += '</x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>';
  template += '</head>';
  template += '<body><table>';
  template += html;
  template += '</table></body>';
  template += '</html>';

  // 将html编码为excel文件，并下载
  let url = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(template)));
  let a = document.createElement('a');
  a.href = url;
  a.download = sheetName;
  a.click();
}
</script>

效果如下：

JS json数据导出为Excel

kuang

引用和评论

JS json数据导出为Excel（单表头、不设置样式）

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合