由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷，代码可直接copy运行
如果文章对你有帮助，关注下我的公众号，二维码在下方，这是对我最好的支持，感恩
方法一
将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.com'
-
},
-
{
-
name:
'炮灰乙'
,
-
phone:
'123456'
,
-
email:
'123@123456.com'
-
},
-
{
-
name:
'土匪丙'
,
-
phone:
'123456'
,
-
email:
'123@123456.com'
-
},
-
{
-
name:
'流氓丁'
,
-
phone:
'123456'
,
-
email:
'123@123456.com'
-
},
-
]
-
// 列标题
-
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]){
-
// 增加\t为了不让表格显示科学计数法或者其他格式
-
str+=
`<td>${ jsonData[i][key] + '\t'}</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://www.w3.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>
如图：
方法二
通过将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.com'
-
},
-
{
-
name:
'炮灰乙'
,
-
phone:
'123456789'
,
-
email:
'000@123456.com'
-
},
-
{
-
name:
'土匪丙'
,
-
phone:
'123456789'
,
-
email:
'000@123456.com'
-
},
-
{
-
name:
'流氓丁'
,
-
phone:
'123456789'
,
-
email:
'000@123456.com'
-
},
-
];
-
// 列标题，逗号隔开，每一个逗号就是隔开一个单元格
-
let
str =
`姓名,电话,邮箱\n`
;
-
// 增加\t为了不让表格显示科学计数法或者其他格式
-
for
(
let
i =
0
; i < jsonData.length ; i++ ){
-
for
(
const
key
in
jsonData[i]){
-
str+=
`${jsonData[i][key] + '\t'},`
;
-
}
-
str+=
'\n'
;
-
}
-
// 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>
如图：
参考了很多大佬的博客其中这两篇对我启发最大，感谢！
https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673
我的github：https://github.com/hhzzcc
关注我的公众号，可以看更多优质文章哦，公众号刚建不久希望大家多多支持我一下，我也会努力更新更多好文章的 😊
转载：https://blog.csdn.net/hhzzcc_/article/details/80419396
查看评论