本文目錄：

• 1.安裝XLSX
• 2.封裝工具
• 3.綁定事件

項(xiàng)目中剛好有個(gè)需求讓前端在頁面上增加一個(gè)按鈕，用戶點(diǎn)擊就可以將列表中的數(shù)據(jù)導(dǎo)出為Excel表格，在網(wǎng)上查了一下方法，大體思路都是需要安裝三個(gè)插件以及拷貝兩個(gè)文件，然后在頁面中寫入邏輯代碼，感覺挺復(fù)雜的，所以研究了一下，總結(jié)了一個(gè)簡(jiǎn)單版本的解決方案。

1.安裝XLSX

npm安裝
npm install xlsx --save

2.封裝工具

可以在項(xiàng)目的utils文件夾中新建一個(gè)xlsx.js用來存放這個(gè)工具函數(shù)

// 下載excel功能
import XLSX from 'xlsx'
/**
 * @param dataList 表格數(shù)據(jù)內(nèi)容  array
 * @param fileName 文件標(biāo)題。必須以 .xlsx結(jié)尾
 */
export const downloadXlsx = (dataList, fileName) => {
    // 參考數(shù)據(jù)
    // dataList =  [
    //   ['姓名', '性別', '年齡', '注冊(cè)時(shí)間'],
    //   ['張三', '男', 18, new Date()],
    //   ['李四', '女', 22, new Date()]
    // ];

    const stringToBuff = str => {
        var buf = new ArrayBuffer(str.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i !== str.length; ++i) {
            view[i] = str.charCodeAt(i) & 0xff
        }
        return buf
    }
    // 創(chuàng)建表格
    let workbook = XLSX.utils.book_new()
    let worksheet = XLSX.utils.aoa_to_sheet(dataList)
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1')

    // 創(chuàng)建二進(jìn)制對(duì)象寫入轉(zhuǎn)換好的字節(jié)流
    let xlsxBlob = new Blob(
        [
            stringToBuff(
                XLSX.write(workbook, {
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                })
            )
        ],
        { type: '' }
    )

    const a = document.createElement('a')
    // 利用URL.createObjectURL()方法為a元素生成blob URL
    a.href = URL.createObjectURL(xlsxBlob) // 創(chuàng)建對(duì)象超鏈接
    a.download = fileName
    a.click()
}

3.綁定事件

首先需要在頁面中引入這個(gè)工具
import { downloadXlsx } from "../../utils/xlsx";
將觸發(fā)代碼寫到onClickDown方法中

onClickDown() {
  let datalist = [];
  datalist.push([
    "Uin",
    "總數(shù)",
    "平均碼率",
    "碼率<1k",
    "碼率1k-1.5k",
    "碼率1.5k-2k",
    "碼率2k-2.5k",
    "碼率2.5k-3k",
    "碼率>3k"
  ]);
  this.list.forEach(item => {
    datalist.push([
      item.uin,
      item.videoBitrateTotalCount,
      item.videoBitrateTotalAverage,
      item.videoBitrate1000Count,
      item.videoBitrate1500Count,
      item.videoBitrate2000Count,
      item.videoBitrate2500Count,
      item.videoBitrate3000Count,
      item.videoBitrateMore3000Count
    ]);
  });
  downloadXlsx(datalist, "Uni數(shù)據(jù)統(tǒng)計(jì).xlsx");
}

需要注意的一點(diǎn)是downloadXlsx的第二參數(shù)是導(dǎo)出文件的名字，這里的名字必須以.xlsx結(jié)尾才可以。
接下來就是測(cè)試效果，結(jié)果自然是完美實(shí)現(xiàn)。

附：不需要安裝任何插件，將同樣的數(shù)據(jù)導(dǎo)出為TXT格式的文件
觸發(fā)事件this.onClickDownDaily("test.txt", datalist);
完整代碼如下：

onClickDownDaily(name, val) {
  var export_blob = new Blob([val]);
  var save_link = document.createElement("a");
  save_link.href = window.URL.createObjectURL(export_blob);
  save_link.download = name;
  this.fakeClick(save_link);
},
fakeClick(obj) {
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  obj.dispatchEvent(ev);
},

另外，在console輸出或者處理String的時(shí)候，使用\n和\r都可以起到換行的效果，但是在txt中，哪個(gè)都不是標(biāo)準(zhǔn)的換行，只有合起來的\r\n才是換行(對(duì)于整個(gè)windows默認(rèn)的換行來說，都是這樣)，意思是\r敲個(gè)回車，表明這行結(jié)束了，光標(biāo)回到頭去，然后再\n下移一行來個(gè)新行。