前端json数据导出表格xls或csv

今天遇到网页里需要导出获奖名单的情况，所以就研究了一下，发现有很多个版本，其中最常见的是json遍历得到字符串，然后创建a链接进行下载

<html>
<head>
	<meta charset="utf-8">
	<title>导出表格</title>
</head>
<body>
  <script>
    function tableToExcel(){
      //要导出的json数据
      var jsonData = [
        {
          name:'noe',
          phone:'17865327942',
          email:'[email protected]'
        },
        {
          name:'天诺',
          phone:'110',
          email:'[email protected]'
        },
        {
          name:'通旺',
          phone:'119',
          email:'[email protected]'
        },
        {
          name:'yry',
          phone:'00000',
          email:'无'
        },
      ]
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for(let i = 0 ; i < jsonData.length ; i++ ){
        for(let item in jsonData[i]){
            str+=`${jsonData[i][item] + '\t'},`;
        }
        str+='\n';
      }
      //encodeURIComponent解决中文乱码
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
</script>
</body>
</html>

经过我的测试，在谷歌浏览器下下载.csv文件完全没有问题，但如果将最后改为link.download= ‘json数据表.xls’，也可以照常下载，但是用Excel打开会询问

回答是也是可以正常打开。其他浏览器还没有测试…

前端json数据导出表格xls或csv

今天遇到网页里需要导出获奖名单的情况，所以就研究了一下，发现有很多个版本，其中最常见的是json遍历得到字符串，然后创建a链接进行下载

猜你喜欢