【XLSX】Excel表格的导入和导出

基本步骤

• 安装依赖：

npm install xlsjs

• 导入依赖：

import * as XLSX from 'xlsx'

• 定义上传 input

<input type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />

---

• excel表格的专业名词是：workbook
• excel里面每张工作表是：sheet

---

• Importing 写入方法：

- `aoa_to_sheet`
将一个二维数组转成sheet
- `table_to_sheet`
将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；
XLSX.utils.table_to_sheet($('table')[0])
- `json_to_sheet`
将一个由对象组成的数组转成sheet
- `sheet_add_aoa`
将一组二维数组添加到现有工作表中
- `sheet_add_json`
将一个由对象组成的数组添加到现有工作表中。

• Exporting 读取方法：

- `sheet_to_json`
将工作表对象转换为 JSON 对象数组
- `sheet_to_csv`
生成定界符分隔值输出
- `sheet_to_txt`
生成 UTF16 格式的文本
- `sheet_to_html`
 生成 HTML 输出
- `sheet_to_formulae`
生成公式列表（带有值回退）

• 输入类型：

let workbook = XLSX.read(data, {type: type});
type主要取值如下：
- `base64`: 文件的 Base64 编码的字符串
- `binary`: 二进制字符串
- `string`: UTF8编码的字符串
- `buffer`: nodejs 缓冲区
- `array`: 8 位无符号整数数组
- `file`: 将被读取的文件路径的字符串（仅nodejs下支持）

• 单元格和单元格地址操作：

- `format_cell` 
生成单元格的文本值（使用数字格式）
- `encode_row / decode_row` 
在0索引行和1索引行之间转换
- `encode_col / decode_col` 
在0索引列和列名之间进行转换
- `encode_cell / decode_cell` 
转换单元格地址
- `encode_range / decode_range` 
转换细胞范围

导入Excel表格

• FileReader共有4种读取方法：

1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'

// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
        var data = e.target.result;
        // 读取二进制的excel
		var workbook = XLSX.read(data, {type: 'binary'});
		if(callback) callback(workbook);
	};
	// 将文件读取为二进制字符串
	reader.readAsBinaryString(file);
}
// 读取远程文件
function readWorkbookFromRemoteFile(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
        if (xhr.status == 200) {
            var data = new Uint8Array(xhr.response)
            var workbook = XLSX.read(data, { type: 'array' });
            if (callback) callback(workbook);
        }
    };
    xhr.send();
}

导出Excel表格

• 基本方式：

function exportData() {
	let data = [
		{name: "张三", id: "123"},
		{name: "李四", id: "124"}
	];
	exportExcel(data, "数据导出表格")
}
 
function exportExcel(data, filename) {
	/* 如果没有导入xlsx组件则导入 */
	if (typeof XLSX == 'undefined') XLSX = require('xlsx');
	// 将一个 json 对象转换成一个 sheet 对象
	let sheet= XLSX.utils.json_to_sheet(data);
	// 创建虚拟的 excel 表格（workbook）
	let wb = XLSX.utils.book_new();
	// 把 sheet 添加到 workbook 里
	XLSX.utils.book_append_sheet(wb, sheet, "sheetName");
	// 导出的方法 1（简单版本）
	XLSX.writeFile(wb, filename + ".xlsx");
	// 导出的方法 2（复杂版本）
	// 把workbook转成blob
	let blob = workbook2blob(wb)
	// 利用a标签和createObjectURL实现下载功能，导出工作薄
	openDownloadDialog(blob, 'excel的标题.xlsx');
}

• 导入文件：

// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    let workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet; 
    // 生成excel的配置项
    let wopts = {
        bookType: 'xlsx', // 要生成的文件格式
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'	// 二进制类型
    };
    let wbout = XLSX.write(workbook, wopts);
    let blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }); 
    // 字符串转ArrayBuffer
    function s2ab(s) {
        let buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);
        for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}

// 将blob对象创建bloburl，然后用a标签实现弹出下载框
function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    let aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    let event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}