axios通过post以及get下载文件方法

downloadExcel(){
      var param = new FormData();
      param.append("excel1", this.excel1); //单文件上传
      this.excel2.forEach((file) => { //多文件上传
        param.append("excel2", file);
        });
      axios.post("url", param) //后端提供url,前端上传文件所需要到达的地址
        .then((res) => {
          console.log(res);
          if (res.data.code == 200 ) {
            
      //上传成功后,进行后续操作:url是后端人员给的地址,{responseType: "blob"} 文件配置
      this.$Axios.get(url,{ responseType: "blob" })
        .then(res=>{
        // get成功后,res后端返回的数据
          console.log(res)
          let content = new Blob([res.data],{});
         //兼容性处理
          let urlObject = window.URL || window.webkitURL || window;
          //获取下载地址href的指向
          let url = urlObject.createObjectURL(content);
          //创建a元素
          let a = document.createElement('a');
          //给a元素的href添加下载后端传递过来的文件
          a.href = url;
          //给下载的文件添加名字,下面是我写死的,如果后端给的每一个文件名都不一样,可以通过res获取文件名,然后给数据
          a.download = `专案表.xlsx`;
          //给生成的a元素绑定单击事件
          a.click();
          // 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
          urlObject.revokeObjectURL(url)
        })
    },

创作不易,如果转载的话,麻烦标记下出处谢谢。如果对各位同仁有所帮助,十分荣幸。

你可能感兴趣的:(javascript,前端,vue.js)