JS 下載

import XLSX from 'xlsx'

   exportExcel() {
      var aoa = [
        ['姓名', '性別', '年齡', '注冊時間'],
        ['張三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()]
      ];
      var sheet = XLSX.utils.aoa_to_sheet(aoa);
      Export.openDownloadDialog(Export.sheet2blob(sheet), '導出.xlsx');
    },


  sheet2blob(sheet, sheetName) {
        sheetName = sheetName || 'sheet1';
        var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet;
        // 生成excel的配置項
        var wopts = {
            bookType: 'xlsx', // 要生成的文件類型
            bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
            type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
        // 字符串轉ArrayBuffer
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
        return blob;
    },
/**
 * 通用的打開下載對話框方法，沒有測試過具體兼容性
 * @param url 下載地址，也可以是一個blob對象，必選
 * @param saveName 保存文件名，可選
 */
openDownloadDialog(url, saveName)
{
    if(typeof url == 'object' && url instanceof Blob)
    {
        url = URL.createObjectURL(url); // 創建blob地址,
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效
    var 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);
}

通過URL.createObjectURL來給blob對象生成臨時URL

HTML5的download屬性

這個屬性很重要，它可以指定下載文件名，并且可以告訴瀏覽器目標鏈接是一個下載鏈接，不是一個普通鏈接，我們看下面代碼就能看出區別了：

<a href="data:text/txt;charset=utf-8,測試下載純文本" download="測試.txt" >下載1</a>
<a href="data:text/txt;charset=utf-8,測試下載純文本">下載2</a>

可以發現，下載1按鈕能夠實現下載，點擊下載2鏈接時直接在瀏覽器打開文件內容了。

參考：
JS彈出下載對話框以及實現常見文件類型的下載

如何使用JavaScript實現純前端讀取和導出excel文件