Excel导出——SheetJS简单使用

获取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

三步：

1. 引入XLSX
2. 获取table Dom
3. 导出

<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>