vue 通过 Blob实现异步下载文件

序言

最近在一个项目中,需要前端要下载后台处理数据生成的表格,前端可以通过几种方式来下载,这里总结一下.

后台接口

   /**
     * 导出excel
     * @param response
     */
    @ApiOperation(value = "导出excel", notes = "导出所有用户的excel表格")
    @PostMapping("excel")
    @RequiresPermissions("user:export")
    @ControllerEndpoint(exceptionMessage = "导出Excel失败",operation = "导出用户excel")
    public void export(HttpServletResponse response) {
        List<User> users = this.userService.findAll();
        ExcelKit.$Export(User.class, response).downXlsx(users, false);
    }

链接下载

顾名思义前端使用a标签直接链接到后台接口,进行下载.

<a href='http://www.zykhome.club/user/excel'><a>

缺点: 我们访问后台接口时候,需要传入token,如果使用a标签下载,token携带不方便.并且不合适后台做一些下载权限的控制

因此个人推荐异步下载的方式

异步下载

 /**
     * 加载用户表格
     */
    downExcel() {
      var $this = this;
      const res = axios
        .request({
          url: "/user/excel",
          method: "post",
          responseType: "blob"
        })
        .then(res => {
          if (res.headers["content-type"] === "application/json") {
            return $this.$message.error(
              "Subject does not have permission [user:export]"
            );
          }
          const data = res.data;
          let url = window.URL.createObjectURL(data); // 将二进制文件转化为可访问的url
          var a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = "用户列表.xls";
          a.click();
          window.URL.revokeObjectURL(url);
        });
    },

下载效果

2323.PNG

3434.PNG

# Vue  

评论

公众号:mumuser

企鹅群:932154986

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×