vue中elementUI表格数据导出下载为xlsx格式的excel文件
1.安装依赖:npm i file-saver --savenpm i xlsx --save2.在需要的地方引入这两个插件:import FileSaver from "file-saver";import XLSX from "xlsx";3.在点击事件中导出和数据:mytable为表格的id名,sheet.xlsx为导出的文件名html:<
·
1.安装依赖:
npm i file-saver --save
npm i xlsx --save
2.在需要的地方引入这两个插件:
import FileSaver from "file-saver";
import XLSX from "xlsx";
3.在点击事件中导出和数据:mytable为表格的id名,sheet.xlsx为导出的文件名
html:
<el-table
id="mytable"
ref="multipleTable"
:data="user.slice((currentPage-1)*pagesize,currentPage*pagesize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="user_id" label="序号"></el-table-column>
<el-table-column prop="user_nickname" label="微信昵称" show-overflow-tooltip></el-table-column>
<el-table-column prop="user_name" label="姓名"></el-table-column>
<el-table-column prop="userSex" label="性别"></el-table-column>
</el-table>
<button @click="output">导出数据</button>
js:
output() {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));//mytable为表格的id名
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"sheet.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
参考:传送门
更多推荐
已为社区贡献28条内容
所有评论(0)