vue根据服务端返回文件流下载

vue根据服务端返回文件流下载文件

//api下的文件
export const jsDownLoad = () => { // 教师模板下载
    return request({
      url: '/api/aiep-basicdata/teahcherinfo/expExcel',
      method: 'get',
      responseType: 'blob',
      params: {
        template: 1,
      }
    })
  }

单页面文件下载的写法

• 直接写到页面里

//vue代码
		temDownLoad(){//点击下载按钮的方法
			jsDownLoad().then((res)=>{
				const data = res.data;
				if (res.data.type == "application/json") {
					// json信息展示
	        		this.handlerResponseError(data)
				}else {
					//服务端返回数据流下载|star
		            let blob = new Blob([data]);
	 				let fileName = '课程结构模板.xlsx'; // 要保存的文件名称
		           if ("download" in document.createElement("a")) {
					   //非IE下载
					    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.appendChild(elink);
				 	} else {
					    //IE10+下载
					    navigator.msSaveBlob(blob, fileName);
				  	}
				}
			}).catch((err) => {
		      console.log(err, 'err');
		    });
	   }

			
			
		handlerResponseError(data){
			const _this = this;
		    const fileReader = new FileReader();
		    fileReader.onload = function () {
		      try {
		        const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
		        console.log("后台返回的信息", jsonData.code);
		        if (jsonData.code == 200) {
		          resolve({code: 200, msg: '操作成功！'})
		        }
		        if (jsonData.code != 200) {
		          reject({code: 400, msg: jsonData.msg})
		        }
		      } catch (err) {
		       reject({code: 400, msg: fileReader.result})
		      }
		    };
		    fileReader.readAsText(data);
		}
			

公共写法放到main.js里的写法

• 在页面调用的写法

	temDownLoad() {//点击下载按钮的方法
      jsDownLoad().then((res) => {
        if (res.data.type == "application/json") {
          this.handlerResponseError(res.data)
          .then(res => {
          })
          .catch(err => {
            this.$message({
              type: "error",
              message: err.msg,
            });
          })
        } else {
          let content = res.data;
          let fileName = '教师模板.xlsx'; // 要保存的文件名称
          this.saveFile(content, fileName)
        }
      });
    },

• main.js代码

Vue.prototype.saveFile = function (content, name = '') {
  let blob = new Blob([content]);
  let fileName = name; // 要保存的文件名称
  if ("download" in document.createElement("a")) {
    //非IE下载
    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.appendChild(elink);
  } else {
    //IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
}

Vue.prototype.handlerResponseError = function (data) {
  let ret = new Promise((resolve, reject) => {
    const _this = this;
    const fileReader = new FileReader();
    fileReader.onload = function () {
      try {
        const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
        console.log("后台返回的信息", jsonData.code);
        if (jsonData.code == 200) {
          resolve({code: 200, msg: '操作成功！'})
        }
        if (jsonData.code != 200) {
          reject({code: 400, msg: jsonData.msg})
        }
      } catch (err) {
       reject({code: 400, msg: fileReader.result})
      }
    };
    fileReader.readAsText(data);
  })
  return ret
}