前端实现下载文件

前端经常会遇到导出文件或下载的功能,其本质就是下载后端的流信息并用Excel保存下来

方案1:

        this.$http({
          method: 'GET',
          url: '/manageApi/exportApiInfoToExcel',
          params: {ids: this.multipleSelection.join(',')},
          responseType: 'blob'
        }).then(res => {
          debugger
          let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
          let url = window.URL.createObjectURL(blob);
          window.location.href = url;
        }).catch(err => {
          this.$message({
            message: res.message,
            type: "error"
          });
        })        

 方案2:

直接使用 window.open(url) 的方式即可下载,但是他会打开一个新窗口,等文件下载完毕后新窗口关闭。视觉效果上就是屏幕闪动,感觉并不优雅。

方案1就是在当前页面即可下载不会打开新页面。

如果不在乎视觉效果的,这个方案是很简单的。如果想做的更友好点就选方案1

转发请备注出处
【公众号:缃言的调调】
原文地址:https://www.cnblogs.com/zuojiayi/p/14452473.html