第一步安装依赖：

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>

迪迪的博客

前端导出excel数据-jsonToExcel

第一步安装依赖：

第二步写导出函数：

第三步调用exportJsonToExcel方法：

小结：

迪迪的博客

前端导出excel数据-jsonToExcel

第一步 安装依赖：

第二步 写导出函数：

第三步 调用exportJsonToExcel方法：

小结：

第一步安装依赖：

第二步写导出函数：

第三步调用exportJsonToExcel方法：