如何利用js前端自己导出excel

1.首先需要在utils定义EXcel.js,代码如下

var idTmr
function transform(tableArray, ArrayList, name, obj ) {
  let tableInnerHTML = ''
  const headerData = tableArray
  const bodyData = ArrayList
  tableInnerHTML += '<thead><tr>'
  tableInnerHTML += `<th colspan=${headerData.length} style='height:66px'>` + name + '</th></tr>'
  if(obj&&obj.AccNo){//电子对账
    tableInnerHTML += `<th colspan=${headerData.length}  style='height:100px;text-align:left;'>\xa0账号：` + obj.AccNo +'\xa0\xa0月份：' + obj.CheckMonth+'\xa0\xa0币种：' + obj.Currency+'\xa0 账户种类：' +obj.AccType +'\xa0\xa0账单余额：' + obj.Balance+ '</th></tr>'
  }
  if(obj&&obj.AcNo){//账户交易明细查询
    tableInnerHTML += `<th colspan=${headerData.length}  style='height:100px;text-align:left;'>\xa0账户：` + obj.AcNo +'\xa0\xa0查询类别：' + obj.QryType+'\xa0\xa0币种：' + obj.Currency+'\xa0 收付金额：' +obj.MinAmt +'\xa0\xa0开始日期：' + obj.StartDate+ '\xa0\xa0结束日期：' + obj.EndDate+'\xa0\xa0对方账号：' + obj.OppAcctNo+'\xa0\xa0对方户名：' + obj.OppAcctName+'</th></tr>'
  }
  tableInnerHTML += '<tr>'
  headerData.forEach(item => {
    tableInnerHTML += "<th rowspan='1' style='height:48px;'>" + item + '</th>'
  })
  tableInnerHTML += '</tr></thead>'
  tableInnerHTML += '<tbody>'
  bodyData.forEach((item,index) => {
    tableInnerHTML += '<tr>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[0]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[1]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[2]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[3]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[4]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[5]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[6]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[7]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[8]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[9]||'')+ '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[10]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[11]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[12]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[13]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[14]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[15]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[16]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[17]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[18]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[19]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[20]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[21]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[22]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[23]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[24]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[25]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[26]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[27]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[28]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[29]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[30]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[31]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[32]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[33]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[34]||'') + '</td>'
    tableInnerHTML += "<td align='center' style='height:48px;mso-number-format:`\@`;vnd.ms-excel.numberformat:\@'>" + (item[35]||'') + '</td>'
     tableInnerHTML += '</tr>'
  })
  if(obj&&obj.AccNo){
  tableInnerHTML += `<th colspan=${headerData.length}  style='height:48px;text-align:left;'>\xa0记录数：` + obj.num +'\xa0\xa0收入总金额：' + obj.AmtA+'\xa0\xa0支出总金额：' + obj.AmtB+'</th></tr>'
  }
  tableInnerHTML += '</tbody>'
  function getExplorer() {
    var explorer = window.navigator.userAgent;
    if (explorer.indexOf('MSIE') >= 0) {
        return 'ie';        // ie
    } else if (explorer.indexOf('Firefox') >= 0) {
        return 'Firefox';   // firefox
    } else if (explorer.indexOf('Chrome') >= 0) {
        return 'Chrome';    // Chrome
    } else if (explorer.indexOf('Opera') >= 0) {
        return 'Opera';     // Opera
    } else if (explorer.indexOf('Safari') >= 0) {
        return 'Safari';    // Safari
    };
  };
  if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
    name += '.xls';
  }
  if (getExplorer() === 'ie') {
    var curTbl = table;
    var oXL = new ActiveXObject('Excel.Application');
    var oWB = oXL.Workbooks.Add();
    var xlsheet = oWB.Worksheets(1);
    var sel = document.body.createTextRange();
    sel.moveToElementText(curTbl);
    sel.select();
    sel.execCommand('Copy');
    xlsheet.Paste();
    oXL.Visible = true;
    try {
        var fname = oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls');
    } catch (e) {
        print('Nested catch caught ' + e);
    } finally {
        oWB.SaveAs(fname);
        // oWB.Close(savechanges = false);
        oXL.Quit();
        oXL = null;
        idTmr = setInterval(Cleanup(), 1);
    }
  } else {
    tableToExcel(tableInnerHTML, name, );   /*在这调用下面的一个方法，传入拼接完成的表格，文件名，回调函数。该方法是干嘛的请往下看*/
  }
}

function Cleanup() {
window.clearInterval(idTmr);
}
let tableToExcel = (function () {
let template = '<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><meta charset="UTF-8"><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:WorksheetOptions><x:Print><x:ValidPrinterInfo /></x:Print></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body><table>{table}</table></body></html>';
let format = function (s, c) {
  return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
};
return function (table, name, callback) {
  let ctx = { worksheet: name || 'Worksheet', table: table };
  let blob = new Blob([format(template, ctx)]);
  let a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = name;     //这里这个name就是对应的文件名！
  a.click();
  a.remove();
  // callback('success');    /*这里调用我们自己传入的回调方法，这样导出Excel完成后你就能在外面知道导出完毕，并且再往下做自己其他的逻辑*/
};
})();
export default transform; 

transform是我暴露的方法，tableArray是表头数组，ArrayList表格数据数组，name表格头部，obj特殊标识

2.bodyData.forEach()遍历是为了将数据插入到表格的每一列 3.window.navigator.userAgent获取不同浏览器的版本和名称，做不同的兼容。 4.最后暴露transform方法，在main里面绑定到vue原型上，就可以全局使用了。