vue項目導出xlsx文件

vue項目導出xlsx文件步驟

1. 設置一個按鈕，綁定單擊響應函數doExport()：

<a href="#" slot="extra" @click.prevent="doExport">
        <Icon type="forward"></Icon>導出  <!-- 這里使用了iview模板，不懂的可以直接使用button標簽 -->
</a>

2. 導出函數模板如下：

doExport () {
    axios({
          method: 'get',
          // 這里輸出表格內的所有數據，如果想導出指定數據，只需要修改中間的拼串就行了（再進行一次封裝）
          url: window.location.origin + '/yyzt3-web/operation/pc/feedback/export.do?contact=' + this.formOptions.contact + '&context=' + this.formOptions.context,
          header: {
          token: localStorage.Token, // 有點類似於保存密碼，可減少服務器的傳輸壓力（具體知識點見帖子）
          'Content-Type': 'application/json,charset=utf-8' // 從服務器端請求的數據類型
          },
          //返回數據以二進制流形式保存
          responseType: 'arraybuffer' 
    }).then(res => {
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel,charset=utf-8'}); // File對象就是一種特殊的Blob，File 接口基於Blob
          const fileName = '意見反饋.xlsx'; // 文件名字
          // 注意，這是非IE下載
          const elink = document.createElement('a'); // 通過elink得到一個<a>標簽（有點類似於ref）
          elink.download = fileName; // 規定被下載的超鏈接目標
          elink.style.display = 'none'; // 設置樣式（照抄就行了）
          elink.href = URL.createObjectURL(blob); // 為<a>標簽綁定href屬性
          document.body.appendChild(elink); // 創建一個<a>標簽
          elink.click();
          URL.revokeObjectURL(elink.href); // 釋放URL對象
          document.body.removeChild(elink);
    });
},