js使用js-xlsx将数据导入导出Excel

前言：因为业务要求，需要在前端从Excel表格中读取数据后以json或array格式发送到后端，或者将后端获取的数据导出到Excel中提供文件下载功能。以下正文：

一、安装XLSX和FileSaver

npm install --save xlsx file-saver

引用：

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

一、读取Excel文件

使用elmentUI的upload组件获取file对象

<el-upload
      class="upload-demo"
      action="https://www.xxx.com/"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :show-file-list='false'
      :before-upload="uploadExcel">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

二、将file对象转换为WorkBook对象

uploadExcel(file) {
        this.readWorkbookFromLocalFile(file, function(workbook) {
          console.log(workbook)
        })
      }, 
 // 读取本地excel文件
      readWorkbookFromLocalFile(file, callback) {
      	var reader = new FileReader();
      	reader.onload = function(e) {
      		var data = e.target.result;
      		var workbook = XLSX.read(data, {type: 'binary'});
      		if(callback) callback(workbook);
      	};
      	reader.readAsBinaryString(file);
      },

三、从WorkBook对象中获取数据

获取数据需要先获取workbook中的每一个worksheet对象，再从每个worksheet中读取数据

获取数据方法如下：

• 使用sheet_to_csv()获取csv数据

• 使用sheet_to_txt()获取txt数据

• 使用sheet_to_html()获取html数据

• 使用sheet_to_json()获取json数据

示例：获取json数据

var sheetNames = workbook.SheetNames; // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
var jsondata = XLSX.utils.sheet_to_json(worksheet);//将worksheet转换为json对象

四、将数据导入到Excel

导入execl数据方法如下：

• aoa_to_sheet

• json_to_sheet

• table_to_sheet

• sheet_add_aoa

• sheet_add_json

示例：导入数组到excel

exportExcel() {
        var aoa = [
        	['姓名', '性别', '年龄', '注册时间'],
        	['张三', '男', 18, new Date()],
        	['李四', '女', 22, new Date()]
        ];
        var worksheet = XLSX.utils.aoa_to_sheet(aoa);
        var workbook = {
            SheetNames: ['本地户主信息'],
            Sheets: {
                '本地户主信息': worksheet
            }
        };
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(workbook, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: "application/octet-stream"
            }),
            //设置导出文件名称
            "历史记录.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },

参考：js-xlsx的使用 - 千年轮回 - 博客园

GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit