前端导出Excel文件

1 SheetJS

---

提供社区版和专业版，社区版本不支持设置样式，专业版本支持，但是要收费。

由于需求要求导出的Excel可以设置字体和样式，所有在GitHub找到了xlsx-style版本，可以设置样式且免费，这个版本的缺点是被阉割了许多SheetJS的函数。

2 导入SheetJS

---

尝试过用require引入，但失败了，最后采用以上方式来引入SheetJS。

3 导出excel

---

3.1 工具类

• aoa_to_sheet：这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据。

• table_to_sheet：将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并。

• json_to_sheet：将一个由对象组成的数组转成sheet。

3.2 合并单元格

var merges = [{
        s: { // s 开始的单元格
          c: 0, // cols 开始列
          r: 0  // rows 开始行
        },
        e: { // e 结束的单元格
          c: 2  // cols 结束列
          r: 0  // rows 结束行
        }
}]

s指的是开始的单元格A1，e指的是结束的单元格C1，以上代码指的是合并A1-C1的单元格。

3.3 单元格cell

 

'A1': {
   v: '单位',
   t: 's',
   s: {
      font: {
          name: 'Arial',
          sz: 16,
          bold: true
      },
      alignment: {
         horizontal: 'center'
      }
 },

•  v`是单元格的原始值，
•  `t`是单元格的数据类型，`s`表示string类型，`n`表示number类型，`b`表示boolean类型，`d`表示date类型。
• -`s`是设置单元格样式。
•  `f`：表示公式，如`B2+B3`；
•  `h`：HTML内容
•  `w`：格式化后的内容
•  `r`：富文本内容`rich text 

3.4 自定义单元格样式

 

• fill：设置单元格填充色。

• font：设置单元格字体。

• numFmt：格式化单元格的数据。

• border：设置单元格的边框。

• alignment：设置单元格数据的上下对齐等。

4 导入excel

---

4.1 读取excel

读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：

• base64: 以base64方式读取；

• string: UTF8编码的字符串;

• binary: BinaryString格式(byte n is data.charCodeAt(n));

// 读取本地excel文件
function 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);
}

4.2 读取WorkBook对象

 

// 读取 excel文件
function outputWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名称集合
    sheetNames.forEach(name => {
        var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
        for(var key in worksheet) {
            // v是读取单元格的原始值
            console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
        }
    });
}

插件自带工具读取WorkBook

• XLSX.utils.sheet_to_csv：生成CSV格式。

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

• XLSX.utils.sheet_to_html：生成HTML格式。

• XLSX.utils.sheet_to_json：输出JSON格式。