vue 使用 xlsx 导出excel

1. 安装

npm i xlsx

2. 引用

  import XLSX from 'xlsx'

3. 导出

   传入table节点：

		let xlsxParam = { raw: true }
        let wb = XLSX.utils.table_to_book(document.querySelector('#id'), xlsxParam)
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '表.xlsx')
     

FileSaver是我引入的包,为了保存文件,当然也可以使用浏览器的saveAs()。

 npm install file-saver --save

传入JSON数据对象：

  let fields = ["姓名", "性别", "年龄", "住址"] // 表头，因为我们不可能用汉字做键值吧
        let workBook = XLSX.utils.json_to_sheet(arr); // arr 数组对象
        const range = XLSX.utils.decode_range(workBook['!ref']) //获取工作表的有效范围，可操作的二位数组
        for(let c = range.s.c; c <= range.e.c; c++) {
          const header = XLSX.utils.encode_col(c) + '1' //某列第一行， 就是表头单元
          workBook[header].v = fields[c] //设置表头单元格文字
        }
        let wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, workBook, "rain");
        XLSX.writeFile(wb, "xx.xlsx");

4. 样式修改（目前只是改宽高，颜色什么的要Pro版，在努力看源码）

• 使用xlsx-style
• eceljs
• 自己想办法
  当然我选择了这个：
  源码里面有一段这个，感觉好像可以用。

export interface ColInfo {
    /* --- visibility --- */
    hidden?: boolean;
    
    /* --- column width --- */
    /** width in Excel's "Max Digit Width", width*256 is integral */
    width?: number;

    /** width in screen pixels */
    wpx?: number;

    /** width in "characters" */
    wch?: number;

    /** Excel's "Max Digit Width" unit, always integral */
    MDW?: number;
}

/** Row Properties Object */
export interface RowInfo {
    /* --- visibility --- */

    /** if true, the column is hidden */
    hidden?: boolean;

    /* --- row height --- */

    /** height in screen pixels */
    hpx?: number;

    /** height in points */
    hpt?: number;

    /** outline / group level */
    level?: number;
}

export interface WorkSheet extends Sheet {
    /**
     * Indexing with a cell address string maps to a cell object
     * Special keys start with '!'
     */
    [cell: string]: CellObject | WSKeys | any;

    /** Column Info */
    '!cols'?: ColInfo[];

    /** Row Info */
    '!rows'?: RowInfo[];

    /** Merge Ranges */
    '!merges'?: Range[];

    /** Worksheet Protection info */
    '!protect'?: ProtectInfo;

    /** AutoFilter info */
    '!autofilter'?: AutoFilterInfo;
}

看了一下好像可以设置行和列的一些属性，而且是对于WorkSheet 的。然后实验了一下果然是的，可以满足我的目前需求，代码如下：

  let workBook = XLSX.utils.json_to_sheet(arr);
  workBook["!cols"] = [{ wpx: 400 }, { wpx: 400 }, { wpx: 400 }, { wpx: 400 }];

还有更多操作遇到再说。。。。