前端导出excel数据-jsonToExcel

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

在工作中遇到了纯前端,将数据导出为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>