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

读取file并分析excel数据

header固定值：

range取值：

async function readExcel(event){
//获取arraybuffer
			let data = await event.target.files[0].arrayBuffer();
			//读取数据并获得工作簿
			let workbook = XLSX.read(data);
			//拿到工作簿中的工作表
			let sheet = workbook.Sheets.事件;
			//读取工作表并获取表头
			let header = XLSX.utils.sheet_to_json(sheet,{
				/*
					读取工作簿范围
					取值范围：
					number：起始行，如果设置为10，那么就从第十行开始读
				*/
			    range:'A1:I2',//读取范围
			    /*
					设置表头，如果不设置，可能读不出来数据
					1：每一行都是按照数组生成,
					'A'：每一行都是对象，且对象属性命名按照A、B、C...排列,
					['测试1','测试2','测试3']:每一行都是对象，如果设置成数组，那么对象属性命名将会按照该数组的顺序进行依次排列，注意列中的空格，将会计算在内，如果这列数据为空，则这个属性不显示；如果固定数组，那么只会按照该数组大小排列，比如在excel中，这一行有8列，而数组却只有6个，那么每行数据最多只展示6个，若这8列数据中有两个空，那么最终结果这行会展示4个数据。
					默认：按照第一行数据命名
					//
				*/
			    header:1,//表头
			})
			let datas = XLSX.utils.sheet_to_json(sheet,{
			    range:'A1:I24',
			    header:header[0],
			})
			console.log(datas);
}
file.addEventListener('change',readExcel);