Easypoi+SpringBoot+Vue+Elment-UI実装ファイルのエクスポート機能(Excel)

他のことは言わないで、直接コードをつけます...
フロントエンド:
クリックイベント:

呼び出し方法:

poiHandle () {
        this.$http({
          url: this.$http.adornUrl(`/biz/personbase/poi`),
          method: 'post',
          data: this.$http.adornData(this.dataPoiList, false),
          responseType: 'blob'
        }).then((res) => {
          //       blob  
          const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
          let filename = 'test.xls'
          //        ，       ，              
          const 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(() => {
          this.$message.error('    ')
        })
      }

分析:
Elmentでボタンクリックリクエストはバックエンドインタフェースにアクセスできますが、戻ったファイル、すなわちファイルを取得することはできません.新しいリンクイベントを作成することでリクエストのダウンロードを行います.
バックエンド:

    @RequestMapping("/poi")
    @RequiresPermissions("biz:personbase:save")
    public void poiInfo(HttpServletResponse response,@RequestBody List personBasePoiForm){
        //    
        ExportParams ex = new ExportParams("   ", "Sheet  ");
        ex.setStyle(ExcelStyleUtil.class);
        Workbook workbook = ExcelExportUtil.exportExcel(ex,PersonBasePoiForm.class,personBasePoiForm);

        response.setHeader("content-Type","application/vnd.ms-excel");
        response.setHeader("Content-Disposition","attachment;filename="+System.currentTimeMillis()+".xls");
        response.setCharacterEncoding("UTF-8");
        try {
            workbook.write(response.getOutputStream());
            workbook.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

分析:
フロントでテーブルデータを転送し、バックグラウンドでexportExcelを介してExcelにデータを書き込み、ファイルストリームを介してフロントエンドリクエストに戻ります.
効果:

コメントへようこそ
参考:keepTravel