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

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

 

 

 

版权声明：本文为yadiblogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yadiblogs/p/10346843.html