js将json导出为表格

时间 2020-10-16 标签 html ajax json app firefox rest excel code htm

一、导出为.csv格式（不兼容ie）

<html>
<meta charset=utf-8>
<head>
</head>
<body>
<button onclick='JSONToExcel()'>导出</button>
<script>

    function JSONToExcel(){
        // 要导出的json数据，这部分数据能够来自ajax请求
        const jsonData = [
            {
                "name": "常健",
                "dept": "移动研发部",
                "id": "1",
                "attendance": 10,
                "rest": 20
            },
            {
                "name": "陈熙文",
                "dept": "移动研发部",
                "id": "2",
                "attendance": 20,
                "rest": 10
            },
            {
                "name": "迟野",
                "dept": "移动研发部",
                "id": "3",
                "attendance": 0,
                "rest": 30
            }
        ]
        //列标题，逗号隔开
        let str = `姓名,部门,id,考勤天数,休息天数\n`;
        //增长\t为了避免让表格显示科学计数法或者其余格式
        for(let i = 0; i < jsonData.length; i++){
            for(let item in jsonData[i]){
                str+=`${jsonData[i][item] + '\t'},`;
            }
            str+='\n';
        }
        //encodeURIComponent解决中文乱码， \ufeff是 ""
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //经过建立a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download =  "考勤月度统计.csv";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

</script>
</body>
</html>

二、导出为.xls格式（不兼容ie firefox）

<html>
<meta charset=utf-8>
<head>
</head>
<body>
<button onclick='tableToExcel()'>导出</button>
<script>

    function tableToExcel() {
        //要导出的json数据
        const jsonData = [
            {
                "name": "常健",
                "dept": "移动研发部",
                "id": "1",
                "attendance": 10,
                "rest": 20
            },
            {
                "name": "陈熙文",
                "dept": "移动研发部",
                "id": "2",
                "attendance": 20,
                "rest": 10
            },
            {
                "name": "迟野",
                "dept": "移动研发部",
                "id": "3",
                "attendance": 0,
                "rest": 30
            }
        ]
        //列标题
        let str = '<tr><td>姓名</td><td>部门</td><td>id</td><td>考勤天数</td><td>休息天数</td></tr>';
        //循环遍历，每行加入tr标签，每一个单元格加td标签
        for (let i = 0; i < jsonData.length; i++) {
            str += '<tr>';
            for (let item in jsonData[i]) {
                //增长\t为了避免让表格显示科学计数法或者其余格式
                str += `<td>${jsonData[i][item]}</td>`;
            }
            str += '</tr>';
        }
        let excelHtml = `
            <html>
                <head>
                 <meta charset='utf-8' />
                </head>
                 <body>
                    <table>
                      ${str}
                    </table>
                 </body>
            </html>
          `
        let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})

        // 建立一个a标签
        let oA = document.createElement('a');
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        oA.href = URL.createObjectURL(excelBlob);
        // 给文件命名
        oA.download = '考勤月历统计表.xls';
        // 模拟点击
        oA.click()
    }
</script>
</body>
</html>