前端实现导出excel表格的方式有好几种，最近公司有一个项目要用到这个功能，最开始百度查到的一些例子导出数据都限制在1.5M大小。最终还是在github上面找到了答案。
<html>
<head>
<meta charset="utf-8">
<title>js导出excel</title>
<script src="js/FileSaver.js"></script>
<script>
// https://github.com/eligrey/FileSaver.js
function onDocumentLoad() {
document.getElementById("export").addEventListener('click',function(){
var blob = new Blob([document.getElementsByClassName("exportTable")[0].outerHTML], {
type: "text/plain;charset=utf-8"
});
saveAs(blob, "export.xls");
})
}
document.addEventListener('DOMContentLoaded', onDocumentLoad);
</script>
</head>
<body>
<button id="export">导出excel</button><br>
<table class="exportTable">
这里使用了GitHub上面的找到的一个FileSaver插件，先使用获取表格table的HTML代码(document.getElementsByClassName("exportTable")[0].outerHTML就是获取到的HTML代码及文本内容)，
用前端自带的new Blob构造函数生成数据对象，这里注意type的定义，GitHub上面的type定义我使用时是乱码的；
生成的数据对象blob传给FileSaver插件的saveAs方法，"export.xls"是下载时的文件名称和格式。这样就实现了导出excel表格了。
原demo地址：https://github.com/kebingzao/fileSaver_excel
注意：原demo的Blob的type属性定义导出的excel文件中的中文文本是乱码的！！
npm包使用方式：
1、安装
npm install file-saver --save
2、require引用
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
网友评论