前端下载文件配置,json文件导出.导出csv文件苹果系统和windows系统都可直接打开文件(推荐使用)导出html文

导出csv文件苹果系统和windows系统都可直接打开文件(推荐使用)

    // excelOne为需要导出的json数据
    let excelOne = [];
    // 每个逗号对应一个单元格
    let str = "id," + dateone+ ",工号," + datetwo + ", 环比\n";
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < excelOne.length ; i++ ){
      for(let item in excelOne[i]){
          str+=`${excelOne[i][item] + '\t'},`;     
      }
      str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    var link = document.createElement("a");
    link.href = url;
    //对下载的文件命名
    link.download =  "文件.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

导出html文本 windows可直接打开,苹果系统需要修改文件后缀名为.xls才可打开

    // excelOne 为需要导出的json数据
    let excelOne = [];
    // 把需要下载的数据进行表格化处理
    var str = '<tr><td>id</td><td>姓名</td><td>工号</td></tr>';
      //循环遍历，每行加入tr标签，每个单元格加td标签
      for(let i = 0 ; i < excelOne.length ; i++ ){
        str+='<tr>';
        for(let item in excelOne[i]){
            //增加\t为了不让表格显示科学计数法或者其他格式
            str+=`<td>${excelOne[i][item] + '\t'}</td>`;     
        }
        str+='</tr>';
      }
      //Worksheet名  此处定义对苹果系统不生效且文字不可解析
      var worksheet = '文件';
      var uri = 'data:application/vnd.ms-excel;base64,';

      //下载的表格模板数据
      var template = `<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">
      <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
      //下载模板
      // let base = base64(template)
      window.location.href = uri + window.btoa(unescape(encodeURIComponent(template)))