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 全局安装后使用报错的解决方法
