纯前端table到excel文件并下载

北里新妆

已于 2022-04-12 10:43:13 修改

阅读量553

点赞数

分类专栏：笔记文章标签： html 前端

于 2022-04-12 10:42:10 首次发布

原文链接：https://www.mk2048.com/blog/blog_h12ih1kccbhjb.html

版权

笔记专栏收录该内容

26 篇文章 2 订阅

订阅专栏

这篇博客介绍了两种方法使用JavaScript将动态生成的表格导出为Excel文件。方法一是通过构建HTML字符串并创建Blob对象实现下载；方法二是将JSON数据转换为逗号分隔值格式，然后创建一个链接触发下载。这两种方法都涉及到了文件下载和数据格式转换，适用于前端数据导出场景。

摘要由CSDN通过智能技术生成

方法一

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>纯js导出动态生成的Table到Excel文件</title>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>
<body>
    <a id="btnExcel" onclick="TableToExcel()" style="color:blue; cursor:pointer;" href="#">导出表格</a>
    <!-- 设置border="1"以显示表格框线 -->
    <table>
        <thead>
            <tr>
                 <th>地址</th>
                <th>商圈</th>
                <th>经度</th>
                <th>维度</th>
              
            </tr>
        </thead>
        <tbody id="tbody1"></tbody>
    </table>
    <script>
        //将table导出到excel文件并下载
        function TableToExcel() {
            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
           var html = "<html><head><meta charset='utf-8' /></head><body><table border=1>" + $('#tableId').html() + "</table></body></html>";
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            //获取一个<a>标签对象
            var a = document.getElementById("btnExcel");
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名
            a.download = new Date().getTime() + ".xlsx";
        }
    </script>
</body>
</html>

方法二

let str = ''
  const jsonData = [{ '仓库代码': '', '货号': '', '尺码': '', '条码': '', '切货数量': '', '折扣': '' }]
  console.log(jsonData)
  for (var k in jsonData[0]) {
    str += k + ','
  }
  str = str.slice(0, str.length - 1) + '\n'
  console.log(str)
  // 增加\t为了不让表格显示科学计数法或者其他格式
  for (let i = 0; i < jsonData.length; i++) {
    for (const item in jsonData[i]) {
      str += `${jsonData[i][item] + '\t'},`
    }
    str += '\n'
  }
  // encodeURIComponent解决中文乱码
  const uri = 'data:application/vnd.ms-excel;charset=utf-8,\ufeff' + encodeURIComponent(str)
  // 通过创建a标签实现
  const link = document.createElement('a')
  link.href = uri
  // 对下载的文件命名
  link.download = '订单模板.xls'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)