乐趣区

js将json导出为表格

jiezi

1、导出为.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>

2、导出为.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>
退出移动版