js:实现纯前端将数据导出excel

¥10.00

需要在不调用后台接口的情况下,将json数据导出到excel表格


Yanne T2 发布于2年前

最佳解决方案

调用excelExportFn()即可导出excel文件,下面是js代码片段

<script>
	const jsonData = [
        {
            name:'路人甲',
            phone:'123456',
            email:'123@123456.com',
            bool:true
        },
        {
            name:'炮灰乙',
            phone:'123456',
            email:'123@123456.com',
            bool:false
        },
        {
            name:'土匪丙',
            phone:'123456',
            email:'123@123456.com',
            bool:true
        },
        {
            name:'流氓丁',
            phone:'123456',
            email:'123@123456.com',
            bool:false
        },
    ]
	
	excelExportFn();
    function excelExportFn(){
        let title = ['姓名','电话','邮箱'];
        let filter = [];  //不导出的字段
        exportExcel(jsonData,'测试excel',title,filter);
    }
	
	


function exportExcel(JSONData, FileName, title, filter) {
    if (!JSONData) return;
    //转化json为object
    var arrData = typeof JSONData != "object" ? JSON.parse(JSONData) : JSONData;
    var excel = "<table>";
    //设置表头
    var row = "<tr>";
    if (title) { //使用标题项
      for (var i in title) {
        row += "<th align='center'>" + title[i] + "</th>";
      }
    } else {//不使用标题项
      for (var i in arrData[0]) {
        row += "<th align='center'>" + i + "</th>";
      }
    }
    excel += row + "</tr>";
    //设置数据
    for (var i = 0; i < arrData.length; i++) {
      var row = "<tr>";
      for (var index in arrData[i]) {
        //判断是否有过滤行
        if (filter) {
          if (filter.indexOf(index) == -1) {
            var value = arrData[i][index] == null ? "" : arrData[i][index];
            row += "<td>" + value + "</td>";
          }
        } else {
          var value = arrData[i][index] == null ? "" : arrData[i][index];
          row += "<td align='center'>" + value + "</td>";
        }
      }
      excel += row + "</tr>";
    }
    excel += "</table>";
    var excelFile =
      "<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'>";
    excelFile +=
      '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
    excelFile +=
      '<meta http-equiv="content-type" content="application/vnd.ms-excel';
    excelFile += '; charset=UTF-8">';
    excelFile += "<head>";
    excelFile += "<!--[if gte mso 9]>";
    excelFile += "<xml>";
    excelFile += "<x:ExcelWorkbook>";
    excelFile += "<x:ExcelWorksheets>";
    excelFile += "<x:ExcelWorksheet>";
    excelFile += "<x:Name>";
    excelFile += "{worksheet}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile += "<![endif]-->";
    excelFile += "</head>";
    excelFile += "<body>";
    excelFile += excel;
    excelFile += "</body>";
    excelFile += "</html>";
    var uri =
      "data:application/vnd.ms-excel;charset=utf-8," +
      encodeURIComponent(excelFile);
    var link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = FileName + ".xls";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>


Noel T0 被采纳率60%
2020-12-18 22:41
打赏 0 0
页面统计
1382 访问
0 帮助
0.00 打赏

hierror 2019 © hierror.com 京ICP备13026190号-1

通知消息
  • 暂无任何消息