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

三步:

  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>
经验分享 程序员 微信小程序 职场和发展