js-xlsx基本使用（vue）

基本介绍

实现前端对Excel文件的解析

一、安装及基本使用

1、安装

github地址：https://github.com/SheetJS/sheetjs

$ npm install xlsx

2、代码内使用

import XLSX from 'xlsx'

二、文件读取处理

1、表头处理

从Excel中读取表头信息

function get_header_row(sheet) {
    const headers = [];
    /* sheet['!ref']表示所有单元格的范围，例如从A1到F8则记录为 A1:F8*/
    const range = XLSX.utils.decode_range(sheet['!ref']);
    let C, R = range.s.r; /* 从第一行开始 */
    /* 按列进行数据遍历 */
    for (C = range.s.c; C <= range.e.c; ++C) {
    	  /* 查找第一行中的单元格 */
        const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})] 

        let hdr = "UNKNOWN " + C; // <-- 进行默认值设置
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);

        headers.push(hdr);
    }
    return headers;
}

2、文件数据处理

使用Element-ui的Uploader进行文件上传，在change事件时触发processFile函数，入参file和fileList为Uploader组件传递的参数

processFile(file, fileList) {
	const reader = new FileReader();
	reader.onload = (e) => {
		/* 解析数据 */
		const bstr = e.target.result;
		const wb = XLSX.read(bstr, {type: 'binary'});
		/* 获取文件的第一个工作表（WorkSheet） */
		const wsname = wb.SheetNames[0];
		const ws = wb.Sheets[wsname];
		/* 数组转换 */
		const data = XLSX.utils.sheet_to_json(ws, {header: 1});
		/* 进行表格数据更新 */
		this.tableData = data;
		/* 进行表格表头数据更新 */
		this.cols = getHeaderRow(ws);
	};
	reader.readAsBinaryString(file.raw);
}

三、实现效果

相关参考

js-xlsx 介绍：https://www.cnblogs.com/ajaemp/p/12880847.html

Get the header column from excel：https://github.com/SheetJS/sheetjs/issues/214