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>

读取file并分析excel数据

header固定值：

header	Description
1	Generate an array of arrays
“A”	Row object keys are literal column labels
array of strings	Use specified strings as keys in row objects
(default)	Read and disambiguate first row as keys

range取值：

range	Description
(number)	Use worksheet range but set starting row to the value
(string)	Use specified range (A1-Style bounded range string)
(default)	Use worksheet range (ws[‘!ref’])

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