VUE: 将Json数据转换为Excel文件

Posted 2022-02-27 长不大的大灰狼

VUE: 将Json数据转换为Excel文件

使用原生JS通过将json遍历进行字符串拼接，将字符串输出到csv文件。

<script>      
    function tableToExcel()
      //要导出的json数据
      const jsonData = [
        
          name:'路人甲',
          phone:'123456789',
          email:'[e-mail]'
        ,
        
          name:'炮灰乙',
          phone:'123456789',
          email:'[e-mail]'
        
      ]
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      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标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    
 
</script>

说明：
适用平台：电脑端和手机端都能正常导出下载
Json数据：可以调用API接口返回。

参考文章：
[1] H5页面使用前端js将json数据导出成Excel文件的3种方式