前端实用的纯JS实现表格生成excel并下载

753 阅读1分钟

话说不多说,上代码!

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div class="tools">
            <button type="button" class="btn green" id="excell" onclick="clickDown()">导出表格</button>
        </div>

       

    </body>
    <script>
        //打印表格
     function downLoadExcel (data, fileName) {
    //定义表头
        let str = `用户名,时间,坐标,来源,授权时间\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < data.length ; i++ ){
            for(let item in data[i]){
                str+=`${data[i][item] + '\t'},`;     
            }
            str+='\n';
        }
        //encodeURIComponent解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        //通过创建a标签实现
        let link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download = `${fileName || '表格数据'}.csv`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };
    function clickDown () {
        let tableData = [{
            name: '你好啊',
            time: 130000000000,
            pre: '127.130',
            source: '淘宝',
            otherTime: 1571276232000
        }, {
            name: '2你好啊',
            time: 5130000000000,
            pre: '127.130',
            source: '淘宝',
            otherTime: 41571276232000
        }, {
            name: '3你好啊',
            time: 3130000000000,
            pre: '127.130',
            source: '淘宝',
            otherTime: 21571276232000
        }]
        downLoadExcel(tableData, '测试数据')
    };
    </script>

</html>