前端 js导出excel

最新推荐文章于 2024-10-16 17:00:06 发布

笋笋~

最新推荐文章于 2024-10-16 17:00:06 发布

阅读量147

点赞数

文章标签： chrome 前端

本文链接：https://blog.csdn.net/qq_35699198/article/details/133805124

版权

一、导出效果

二、导出代码

download() {
  let data = [{
      name: 'aaaa',
      age: 10,
      address: '广东',
      phone: '1',
      wechart: '1'
    },
    {
      name: 'bbbb',
      age: 11,
      address: '广西',
      phone: '2',
      wechart: '2'
    },
    {
      name: 'cccc',
      age: 12,
      address: '山东',
      phone: '3',
      wechart: '3'
    }
  ]
  if (!data.length) {
    this.$Message.warning('没有可以导出的数据');
    return;
  }
  let table = `<table border="1px" cellspacing="0" cellpadding="0">
      <thead>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>手机号</th>
        <th>微信号</th>
    </thead>
    <tbody>
    `;

  for (let i = 0; i < data.length; i++) {
    let {
      name,
      age,
      address,
      phone,
      wechart
    } = data[i];
    table += `<tr>
                <td>${i + 1}</td>
                <td>${name} </td>
                <td>${age}</td>
                <td>${address}</td>
                <td>${phone}</td>
                <td>${wechart}</td>
              </tr>`;
  }
  table += '</tbody>';
  table += '</table>';
  let html = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>
                <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
                <meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
                <head>
                </head>
                <body>
                    ${table}
                </body>
              </html>`;
  let url = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(html);
  let a = document.createElement('a');
  a.href = url;
  a.download = `${new Date().Format('yyyyMMddhhmmss')}.xls`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}