美文网首页
JS将获取到的JSON数据导出excel表

JS将获取到的JSON数据导出excel表

作者: 小小的开发人员 | 来源:发表于2019-06-17 17:38 被阅读0次

      JS将获取到的JSON数据导出到excel表中,通常有两种方法,导出.cvs纯文本格式,优点是导出速度快,当数据量很大时可以优先考虑,缺点是纯文本是不能进行格式排版的,需要导出带排版格式的文件时,就需要导出成二进制格式的.xls文件。

    1. 导出为.cvs文件

    相信很多萌新不知道什么是cvs的?我这里简单介绍一下:
      逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本)。纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。
      CSV是一种通用的、相对简单的文件格式,被用户、商业和科学广泛应用。最广泛的应用是在程序之间转移表格数据,而这些程序本身是在不兼容的格式上进行操作的(往往是私有的和/或无规范的格式)。

    我们来写的例子:

    <html>
    <meta charset=utf-8" />
    <head>
        <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
        <button onclick='JSONToExcel()'>导出</button>
    </head>
    <body>
    <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文件

      JS是支持导出二进制的xls格式的,只需要我们用 Blob类转化下,来看看是具体怎么用的。

    <html>
    <meta charset=utf-8" />
    <head>
        <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
        <button onclick='tableToExcel()'>导出</button>
    </head>
    <body>
    <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>
    
    

    .xls是可以写入排版格式的,直接上例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style media="screen">
            .tableA {
                border-collapse: collapse;
            }
            .tableA .title th{
                height: 50px;
                font-size: 24px;
                font-family: '微软雅黑';
                font-weight: 700;
            }
            .tableA tr th {
                border: 1px #000 solid;
                height: 40px;
                background: #efefef;
            }
            .tableA tr td {
                padding: 0 40px;
                border: 1px #000 solid;
                height: 40px;
                text-align: center;
            }
            .tableA .footer td {
                font-size: 20px;
                font-weight: 700;
            }
        </style>
    </head>
    <body>
    <table bordercolor="black" class="tableA">
        <tr class="title">
            <th colspan="4">学生信息</th>
        </tr>
        <tr>
            <th>名字</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>19</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>小黄</td>
            <td>男</td>
            <td>20</td>
            <td>2班</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>男</td>
            <td>29</td>
            <td>3班</td>
        </tr>
        <tr class="footer">
            <td colspan="4">总人数:3人</td>
        </tr>
    </table>
    <script>
        let oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
        let excelHtml = `
        <html>
          <head>
            <meta charset='utf-8' />
            <style>
              .tableA {
                border-collapse: collapse;
              }
              .tableA .title th{
                height: 50px;
                font-size: 24px;
                font-family: '微软雅黑';
                font-weight: 700;
              }
              .tableA tr th {
                border: 1px #000 solid;
                height: 40px;
                background: #efefef;
              }
              .tableA tr td {
                padding: 0 40px;
                border: 1px #000 solid;
                height: 40px;
                text-align: center;
              }
              .tableA .footer td {
                font-size: 20px;
                font-weight: 700;
              }
            </style>
          </head>
          <body>
            ${oHtml}
          </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>
    

    相关文章

      网友评论

          本文标题:JS将获取到的JSON数据导出excel表

          本文链接:https://www.haomeiwen.com/subject/dwlzfctx.html