前言
修改之前项目代码的时候，发现前人导出excel是用纯javascript实现的。并没有调用后台接口。
之前从来没这么用过，记录一下。以备不时之需。
方法一
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，
代码如下：
<html>
<head>
????<p?style="font-size:?20px;color:?red;">使用table标签方式将json导出xls文件</p>
????<button?onclick='tableToExcel()'>导出</button>
</head>
<body>
????<script>?
????const?tableToExcel?=?()?=>?{
????????//?要导出的json数据
????????const?jsonData?=?[
????????????{
????????????????name:'路人甲',
????????????????phone:'123456',
????????????????email:'123@123456测试数据'
????????????},
????????????{
????????????????name:'炮灰乙',
????????????????phone:'123456',
????????????????email:'123@123456测试数据'
????????????},
????????????{
????????????????name:'土匪丙',
????????????????phone:'123456',
????????????????email:'123@123456测试数据'
????????????},
????????????{
????????????????name:'流氓丁',
????????????????phone:'123456',
????????????????email:'123@123456测试数据'
????????????},
????????]
????????//?列标题
????????let?str?=?'<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
????????//?循环遍历，每行加入tr标签，每个单元格加td标签
????????for(let?i?=?0?;?i?<?jsonData.length?;?i++?){
????????????str+='<tr>';
????????????for(const?key?in?jsonData[i]){
????????????????//?增加 为了不让表格显示科学计数法或者其他格式
????????????????str+=`<td>${?jsonData[i][key]?+?' '}</td>`;????
????????????}
????????????str+='</tr>';
????????}
????????//?Worksheet名
????????const?worksheet?=?'Sheet1'
????????const?uri?=?'data:application/vnd.ms-excel;base64,';
?
????????//?下载的表格模板数据
????????const?template?=?`<html?xmlns:o="urn:schemas-microsoft-com:office:office"
????????xmlns:x="urn:schemas-microsoft-com:office:excel"
????????xmlns="http://HdhCmsTestw3.org/TR/REC-html40">
????????<head><!--[if?gte?mso?9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
????????<x:Name>${worksheet}</x:Name>
????????<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
????????</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
????????</head><body><table>${str}</table></body></html>`;
????????//?下载模板
????????window.location.href?=?uri?+?base64(template);
????};
?
????//?输出base64编码
????const?base64?=?s?=>?window.btoa(unescape(encodeURIComponent(s)));
????</script>
</body>
</html>
导出的文件后缀是xls，用office打开的时候不太友好。
然后，我发现了第二个方法
方法二
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下：
<html>
<head>
????<p?style="font-size:?20px;color:?red;">使用a标签方式将json导出csv文件</p>
????<button?onclick='tableToExcel()'>导出</button>
</head>
<body>
????<script>
????const?tableToExcel?=?()?=>?{
????????//?要导出的json数据
????????const?jsonData?=?[
????????????{
????????????????name:'路人甲',
????????????????phone:'123456789',
????????????????email:'000@123456测试数据'
????????????},
????????????{
????????????????name:'炮灰乙',
????????????????phone:'123456789',
????????????????email:'000@123456测试数据'
????????????},
????????????{
????????????????name:'土匪丙',
????????????????phone:'123456789',
????????????????email:'000@123456测试数据'
????????????},
????????????{
????????????????name:'流氓丁',
????????????????phone:'123456789',
????????????????email:'000@123456测试数据'
????????????},
????????];
????????//?列标题，逗号隔开，每一个逗号就是隔开一个单元格
????????let?str?=?`姓名,电话,邮箱
`;
????????//?增加 为了不让表格显示科学计数法或者其他格式
????????for(let?i?=?0?;?i?<?jsonData.length?;?i++?){
????????????for(const?key?in?jsonData[i]){
????????????????str+=`${jsonData[i][key]?+?' '},`;????
????????????}
????????????str+='
';
????????}
????????//?encodeURIComponent解决中文乱码
????????const?uri?=?'data:text/csv;charset=utf-8,ufeff'?+?encodeURIComponent(str);
????????//?通过创建a标签实现
????????const?link?=?document.createElement("a");
????????link.href?=?uri;
????????//?对下载的文件命名
????????link.download?=??"json数据表.csv";
????????link.click();
????}
????</script>
</body>
</html>
上边的两段代码复制即可用。
到此这篇关于javascript 实现纯前端将数据导出excel两种方式的文章就介绍到这了,更多相关javascript 数据导出excel内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
查看更多关于javascript 实现纯前端将数据导出excel两种方式的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did124012