vue中使用axios處理post方法導出excel表格

vue中使用axios處理post方法導出excel表格。

技術點：vue、axios、poi

1、後臺輸出數據流。（ps：因爲表格模板格式會比較好看，所以建議使用模板）

    /**
     * 導出測試
     * @return 輸出流
     */
    @RequestMapping(value = "exportExcel.do")
    @ResponseBody
    public void exportExcel(HttpServletResponse response) {
        InputStream in = null;
        OutputStream out = null;
        HSSFWorkbook wb = null;
        try {
            //讀取模板
            in = this.getClass().getResourceAsStream("/static/excel/test.xls");
            wb = new HSSFWorkbook(in);
            //設置表格內容樣式
            HSSFCellStyle cellStyle = wb.createCellStyle();
            cellStyle.setBorderBottom(HSSFCellStyle.BORDER_THIN);
            cellStyle.setBorderTop(HSSFCellStyle.BORDER_THIN);
            cellStyle.setBorderRight(HSSFCellStyle.BORDER_THIN);
            cellStyle.setBorderLeft(HSSFCellStyle.BORDER_THIN);
            //垂直、水平居中
            cellStyle.setAlignment(HSSFCellStyle.ALIGN_CENTER); // 水平居中
            cellStyle.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER); // 上下居中
            //寫入對象
            Sheet sheet = wb.getSheetAt(0);
            Row row = sheet.createRow(1);    //創建第一行
            row.setHeight((short) 500);
            Cell cell0 = row.createCell(0);
            cell0.setCellStyle(cellStyle);
            cell0.setCellValue("測試數據");
            //輸出
            out = response.getOutputStream();
            wb.write(out);
        } catch (Exception e) {
            logger.error("exception",e);
        } finally {
            try {
                if(!ObjectUtils.isEmpty(in)){
                    in.close();
                }
                if(!ObjectUtils.isEmpty(out)){
                    out.close();
                }
                if(!ObjectUtils.isEmpty(wb)){
                    wb.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

2、axios post方法，使用es6 promise封裝。

    exportExcel(url,data){
      return new Promise((resolve, reject) => {
        axios({
          method: 'post',
          url: this.$publicPath + this.$serverName + url, // 請求地址
          data: data, // 參數
          responseType: 'blob', // 表明返回服務器返回的數據類型
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          resolve(res.data);
        }).catch(err => {
          reject(err);
        });
      })
    },

3、導出js

       /**
       * 導出Excel
       * @param
       */
      exportScheduleExcel(){
        let that = this;
        //調用方法
        that.exportExcel('testController/exportExcel.do',data).then(result =>{
          let blob = new Blob([result]);
          let fileName = '項目進度明細表.xls';
          let eLink = document.createElement('a');
          eLink.download = fileName;
          eLink.style.display = 'none';
          eLink.href = URL.createObjectURL(blob);
          document.body.appendChild(eLink);
          eLink.click();
          URL.revokeObjectURL(eLink.href); // 釋放URL 對象
          document.body.removeChild(eLink);
        }).catch(err =>{
          that.$message.error(err.message);
        });
      }