当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端导出excel数据-jsonToExcel

前端导出excel数据-jsonToExcel

2019年02月02日  | 移动技术网IT编程  | 我要评论

咳咳，好久没有写博了。。。 

在工作中遇到了纯前端，将数据导出为excel文件。正文开始：

 

第一步 安装依赖：

npm i xlsx

第二步 写导出函数：

import xlsx from 'xlsx'

const exportjsontoexcel = (dataarr) => {
    const now = new date()
    const wopts = { booktype: 'xlsx', booksst: false, type: 'binary' };//这里的数据是用来定义导出的格式类型
    const wb = { sheetnames: ['sheet1'], sheets: {}, props: {} };
    wb.sheets['sheet1'] = xlsx.utils.json_to_sheet(dataarr);//通过json_to_sheet转成单页(sheet)数据
    saveas(new blob([s2ab(xlsx.write(wb, wopts))], { type: "application/octet-stream" }), `导出文件-${now.getfullyear()}${now.getmonth() + 1}${now.getdate()}.${wopts.booktype}`);
}

// 导出excel
const saveas = (obj, filename) => {
    var tmpa = document.createelement("a");
    tmpa.download = filename || "下载";
    const href = url.createobjecturl(obj); //绑定a标签
tmpa.href = href;

    tmpa.click(); //模拟点击实现下载
    settimeout(function () { //延时释放
        url.revokeobjecturl(href); //用url.revokeobjecturl()来释放这个object url
    }, 100);
}

const s2ab = (s) => {
    if (typeof arraybuffer !== 'undefined') {
        var buf = new arraybuffer(s.length);
        var view = new uint8array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charcodeat(i) & 0xff;
        return buf;
    } else {
        var buf = new array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charcodeat(i) & 0xff;
        return buf;
    }
}

export default exportjsontoexcel

第三步 调用exportjsontoexcel方法：

  // 处理下载按钮， 少于1000条，则前端下载
  handleclickdownload = () => {
    exporttoexcel(data)
  }

// 其中传入给exporttoexcel的数据格式如下：是一个对象的数组，一个对象是一行的数据，key是表头， value是数据
data = [{'联系电话':item.tel,
                '客户标签':item.customerlablevalue,
                '客户状态':item.statevalue,
                '距上次跟进(天)':item.outtrackday,
                '客户来源':item.sourcevalue,
                '业务员':item.salesmanname,
                '省份':item.provincename,
                '城市':item.cityname,
                '区县':item.countyname,
                '学历':item.educationname,
                '性别':item.gender == 0 ? '男':'女',
                '政治面貌':item.politicaloutlookname,
                'qq':item.qq,
                '类型':item.type==1?'个人客户':'企业客户',
                '联系次数':item.contactnum,
                '微信':item.wechat,
                '错误信息': item.errorinfo
}]

小结：

第三步的调用非常简单，将想要导出的数据格式化一下，传给exporttoexcel方法即可。想哪里调用都可以呦。

第二步，让我新学习了两个方法：url.createobjecturl() 和 url.revokeobjecturl() ；

objecturl = url.createobjecturl(blob)：静态方法创建一个字符串，包含blob的url。这个新的url表示指定的file对象或者blob对象。

                                        每次调用这个方法时候，都会创建一个新的url对象，即便使用的是相同的参数，因此，需要使用url.revokeobjecturl() 来释放。

url.revokeobjecturl(objecturl):   释放需要在使用后释放，如果在使用前释放，则objecturl就为undefined。 举栗子：

<!doctype html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>test url</title>
</head>

<body>
    <p>test revoke before use</p>
    <input type="file" id="test" />
    <br />
    <br />
    <br />
    <p>test use revoke use</p>
    <input type="file" id="test3" />
    <script>
        $('#test').on('change', function (e) {
            var newimg = document.createelement("img");
            var url = url.createobjecturl(e.target.files[0])
            console.log(url);

            newimg.src = url;
            url.revokeobjecturl(url); // 这里释放了！没有图片
            document.body.appendchild(newimg);
            console.log(url);
        });

        $('#test3').on('change', function (e) {
            var newimg = document.createelement("img");
            var url = url.createobjecturl(e.target.files[0])

            newimg.src = url;
            newimg.onload = function () {
                url.revokeobjecturl(url); // onload时候释放，没有问题，因为已经加载完毕！
                document.body.appendchild(newimg);
            }
        });
    </script>
</body>

</html>

 

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网