利用 js xlsx 實現 Excel 文件導出功能

安裝js-xlsx

cnpm install js-xlsx
複製代碼

安裝成功

JS：

import XLSX from 'xlsx'
const EXCEL = class {
  construct () {}
  /**
   * [exportsEXCL 導出數據到excel]
   * @param  {Array}  [_headers=[]]   [表頭]
   * @param  {Array}  [_body=[]]      [內容]
   * @param  {String} [name='excel'}] [文件名]
   * @return {[type]}                 [無]
   */
  exportsEXCL ({_headers = [], _body = [], name = 'excel'}) {
    /**
     *
     * workbook 對象，指的是整份 Excel 文檔。咱們在使用 js-xlsx 讀取 Excel 文檔以後就會得到 workbook 對象。
     * worksheet 對象，指的是 Excel 文檔中的表。咱們知道一份 Excel 文檔中能夠包含不少張表，而每張表對應的就是 worksheet 對象。
     * cell 對象，指的就是 worksheet 中的單元格，一個單元格就是一個 cell 對象。
     */
    // const workbook = {
    //   SheetNames: ['sheet1'],
    //   Sheets: {
    //     'sheet1': {
    //       '!ref': 'A1:E4', // 必需要有這個範圍才能輸出，不然導出的 excel 會是一個空表
    //       A1: {v: 'id'}
    //     }
    //   }
    // }
    // const _headers = ['id', 'name', 'age', 'country', 'remark']
    // const _data = [
    //   {
    //     id: 1,
    //     name: 'test1',
    //     age: 30,
    //     country: 'China',
    //     remark: 'hello'
    //   },
    //   {
    //     id: 2,
    //     name: 'test2',
    //     age: 40,
    //     country: 'UN',
    //     remark: '??'
    //   }
    // ]
    // 獲取表頭
    const headers = _headers
      // 爲 _headers 添加對應的單元格位置
      // [
      //   {
      //     v: 'id', position: 'A1'
      //   },
      //   {
      //     v: 'name', position: 'B1'
      //   },
      //   ......
      // ]
      // Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。
      .map((v, i) => Object.assign({}, {v, position: String.fromCharCode(65 + i) + 1}))
      // 轉換成 worksheet 須要的結構
      // {
      //   A1: {v: 'id'},
      //   B1: {v: 'name'},
      //   ....
      // }
      .reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {})

    const body = _body
      // 匹配 headers 的位置，生成對應的單元格數據
      // [
      //   [
      //     {
      //       v: 1,
      //       position: 'A2'
      //     },
      //     {
      //       v: 'test1',
      //       position: 'B2'
      //     },
      //     {
      //       v: 30,
      //       position: 'C2'
      //     },
      //     {
      //       v: 'China',
      //       position: 'D2'
      //     },
      //     {
      //       v: 'hello',
      //       position: 'E2'
      //     }
      //   ],
      //   [
      //     {
      //       v: 2,
      //       position: 'A3'
      //     },
      //     {
      //       v: 'test2',
      //       position: 'B3'
      //     },
      //     {
      //       v: 40,
      //       position: 'C3'
      //     },
      //     {
      //       v: 'UN',
      //       position: 'D3'
      //     },
      //     {
      //       v: '??',
      //       position: 'E3'
      //     }
      //   ]
      // ]
      .map((v, i) => _headers.map((k, j) => Object.assign({}, { v: v[k], position: String.fromCharCode(65 + j) + (i + 2) })))
      // 對剛纔的結果進行降維處理（二維數組變成一維數組）
      // [
      //   {
      //     v: 1,
      //     position: 'A2'
      //   },
      //   {
      //     v: 'test1',
      //     position: 'B2'
      //   },
      //   {
      //     v: 30,
      //     position: 'C2'
      //   },
      //   {
      //     v: 'China',
      //     position: 'D2'
      //   },
      //   {
      //     v: 'hello',
      //     position: 'E2'
      //   },
      //   {
      //     v: 2,
      //     position: 'A3'
      //   },
      //   {
      //     v: 'test2',
      //     position: 'B3'
      //   },
      //   {
      //     v: 40,
      //     position: 'C3'
      //   },
      //   {
      //     v: 'UN',
      //     position: 'D3'
      //   },
      //   {
      //     v: '??',
      //     position: 'E3'
      //   }
      // ]
      .reduce((prev, next) => prev.concat(next))
      // 轉換成 worksheet 須要的結構
      // {
      //   A2: {v: 1},
      //   B2: {v: 'test1'},
      //   .....,
      //   A3: {v: 2},
      //   B3: {v: 'test2'}
      // }
      .reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {})
    // 合併headers和data
    const output = Object.assign({}, headers, body)
    // 獲取全部單元格位置
    const outputPos = Object.keys(output)
    // ====設置xlsx單元格樣式
    // headers['B1'].s = { font: { sz: 14, bold: true, color: { rgb: 'FFAA00' } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: 'FFFF00' } } }
    // 計算出範圍
    const ref = outputPos[0] + ':' + outputPos[outputPos.length - 1]

    // 構建 workbook 對象
    const wb = {
      SheetNames: ['mySheet'],
      Sheets: {
        'mySheet': Object.assign({}, output, { '!ref': ref })
      }
    }
    // 導出 Excel
    // XLSX.writeFile(wb, `${name}.xlsx`)
    XLSX.writeFile(wb, `${name}.xlsx`, { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true })
  }
}
exports.defalut = new EXCEL()

複製代碼