Excel导出——SheetJS简单使用
获取SheetJS插件
// 安装 # yarn add https://cdn.sheetjs.com/xlsx-0.18.10/xlsx-0.18.10.tgz
简单使用
注:表格导出有多种方式,如果无法获取Table Dom,如Element UI 会将table最终转换为div套div的形式,这样的话只能用数据转换成excel进行导出(略显麻烦);如果可以拿到Table Dom,则可以用Dom 转为Excel方式导出。
Dom转换为Excel
三步:
- 引入XLSX
- 获取table Dom
- 导出
<template> <div> <button @click="exportExcel"><b>导出excel</b></button><br/><br/> <table id="table1"> <tr><td>A2</td><td>B2</td></tr> <tr><td>A3</td><td>B3</td></tr> </table> </div> </template> <!-- 页面中直接引用 --> <script> import XLSX from "xlsx/dist/xlsx.full.min.js" export default{ methods:{ exportExcel(){ const table = document.getElementsByClassName("table1")[0] //将table转成工作簿 //raw:true //表示类型都为文字类型即无需自动转换各种类型,这里仅为处理100%转换成数字100的问题 const wb = XLSX.utils.table_to_book(table,{ raw:true}) //导出 XLSX.writeFile(wb,"SheetJS.xlsx") } } } </script>
对象转换成Excel
<template> <div> <button @click="exportExcel"><b>导出excel</b></button><br/><br/> </div> </template> <script> import XLSX from "xlsx/dist/xlsx.full.min.js" export default{ data(){ return { tableData:[ { A:A1,B:B1,C:C1}, { A:A2,B:B2,C:C2}, { A:A3,B:B3,C:C3} ] } }, methods:{ exportExcel(){ //创建工作簿 var workbook = XLSX.utils.book_new() //将数据添加到工作表 var worksheet = XLSX.utils.json_to_sheet(this.tableData,{ header:[A,B,C],skipHeader:true}) //插入一行数据到第一行 //模拟一条数据 const data=[ { A:A4,B:B4,C:C4} ] XLSX.utils.sheet_add_json(worksheet,data,{ header:header:[A,B,C]}) //工作簿、工作表、工作表名 XLSX.utils.book_append_sheet(workbook,worksheet,"sheet1") XLSX.writeFile(workbook,"sheetJS.xlsx`在这里插入代码片`") } } } </script>
下一篇:
yarn 全局安装后使用报错的解决方法