这个文章的内容是表格生成文件,表格生成文件,表格生成文件
适用于各种js框架,这边有2种情况:
1、将页面的table 元素 变成excel文件并下载(详见1.1和1.2)
2、如果excel数据非常大的话后端将数据变成excel 前端直接下载这个文件(详见2.1)
下载依赖
yarn add xlsx
你所需要的Table
<table border="1">
<thead>
<tr>
<th>1小时候</th>
<th>长大后</th>
<th>小时候</th>
<th>长大后</th>
</tr>
</thead>
<tbody>
<tr>
<td>3哭着哭着就笑了</td>
<td>笑着笑着就哭了</td>
<td>我们终于到了小时候最羡慕的年纪</td>
<td>确没能成为小时候最想成为的人</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2枕头上是口水</td>
<td>枕头上是泪水</td>
<td>微笑是一种心情</td>
<td>微笑是一种表情</td>
</tr>
</tfoot>
</table>
1.1:
createElsx() {
// 获取表格的dom元素
var elt = document.getElementsByTagName('table')[0];
console.log(elt)
// 将表格的dom 元素转化为 excel工作薄
var wb = XLSX.utils.table_to_book(elt, { sheet: "Sheet JS" });
// 将工作薄导出为excel文件
XLSX.writeFile(wb, '呵呵哒.xlsx');
}
componentDidMount(){
this.createElsx()
}
1.2:
createElsx() {
let arr = [
["序号", '姓名', '年纪'],
["0", '呵呵哒', '15'],
["1", '12313', '15'],
]
// 将数组转化为标签页
var ws = XLSX.utils.aoa_to_sheet(arr);
// 创建工作薄
var wb = XLSX.utils.book_new()
// 将标签页插入到工作薄里
XLSX.utils.book_append_sheet(wb, ws)
// 将工作薄导出为excel文件
XLSX.writeFile(wb, '呵呵哒.xlsx');
}
componentDidMount() {
this.createElsx()
}
2.1
// 前端直接下载
前端进行下载
<button onclick='download()'>open下载</button>
<iframe name='myFrame' style="display:none;"></iframe>
<script>
function download(){
window.open('http://localhost:3000/getelsx','myFrame')
}
</script>
// tips:通过iframe可以不让浏览器闪一下