js將json導出爲表格

時間 2020-10-16

標籤 html ajax json app firefox rest excel code htm 欄目 JavaScript 简体版

原文原文鏈接

一、導出爲.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>