[JavaScript知识库]电子表格工具

电子表格工具SheetJS，可用于解析、生成Excel等。

官方文档：SheetJS中文文档、SheetJS官方文档。

下边案例参考自：csdn

引用

npm下载：

npm install xlsx

cdn引入：

<script lang="javascript" src="https://unpkg.com/xlsx"></script>

解析excel

使用SheetJs将excel中的数据转换为json对象。（数据保存在数组中）

elementUI组件，选择excel文件：

<el-upload :on-change="fileChange2" :show-file-list="false" :auto-upload="false" action="#"
	style="display: inline-block;">
	<el-button type="primary"
		style="border:0;font-size: 3.25rem!important;width: 100vw;height: 100%;padding: 1.625rem 4.25rem;">
		选择文件
	</el-button>
</el-upload>

函数fileChange2如下：

//读取excel
fileChange2(file) {
	var _vue = this;
	var reader = new FileReader();
	reader.onload = function(e) {
		var data = e.target.result;
		var workbook = XLSX.read(data, {
			type: 'binary'
		});
		/* 业务代码 */
		workbook.SheetNames.forEach(sheetName => {
			//遍历excel中的工作表
			var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[
				sheetName]); //将数据转换为json对象（发在数组中）
			if (XL_row_object.length > 0) {
				_vue.handelData(XL_row_object); //处理数据
				return; //只处理第一个工作表中的数据
			}
		})
	};
	reader.readAsBinaryString(file.raw);
},
//对数据进行处理
handelData(data) {
	console.log(data);
    /* 数据处理 */
}

//表格样式会影响解析出来的数据格式。可以提供一个excel模板用于填写数据。

生成excel

使用json数据生成excel文件。

//生成excel
toExcel() {
	var _vue = this;
	//数据为 _vue.datas
	
	// 设置表头（列名）
	//unshift 将新项添加到数组的开头，并返回新的长度。
	_vue.datas.unshift({
		user_name: '姓名',//key : value
		user_code: '账号',
		duty: '职务',
		r: '序号'
	});

	var worksheet = XLSX.utils.json_to_sheet(_vue.datas, {
		header: ['r', 'user_name', 'user_code', 'duty'], // 自定义表头（列名）顺序（使用key），若不设置则按默认顺序
		skipHeader: true // 隐藏key（可自行改成false下载后对比差异）
	});

	// begin，把每个单元格格式都设置为文本，如果不需要修改单元格格式可省略此处代码
	var range = XLSX.utils.decode_range(worksheet['!ref']);
	for (var row = range.s.r; row <= range.e.r; row++) {
		for (var columns = range.s.c; columns <= range.e.c; columns++) {
			var cellName = XLSX.utils.encode_cell({
				c: columns,
				r: row
			});
			worksheet[cellName].z = '@';
		}
	}
	// end

	var new_workbook = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(new_workbook, worksheet, 'Sheet1');
	// 设置文件名，自动执行下载
	XLSX.writeFile(new_workbook, '财务部拥有角色的账号.xlsx');
}

除了可以生成excel文件，还支持：

XLSX.utils.sheet_to_csv：生成CSV格式

XLSX.utils.sheet_to_txt：生成纯文本格式

XLSX.utils.sheet_to_html：生成HTML格式

XLSX.utils.sheet_to_json：输出JSON格式

等等