原生js以及vue 文件下载

文件下载

普通js下载

function fileDown(formData, url) {
    
    
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url, true);
	xhr.setRequestHeader('Content-Type', 'application/json;charset=utf8');
	xhr.setRequestHeader('bwTicket', $bw.bwUtil.getLocalData('bwTicket'));
	xhr.responseType = "blob"; // 设置返回类型blob
	xhr.onload = function() {
    
    
		if (this.status === 200) {
    
    
			var blob = this.response;// 返回的文件流
			var reader = new FileReader();// 读取文件内容
			reader.onload = function(e) {
    
    
				var result = e.target.result;
				// 此处对fileReader读出的结果进行JSON解析 可能会出现错误，需要进行捕获 处理下载失败的情况
				try {
    
    
					var resultData = JSON.parse(result);
					if (resultData) {
    
    
						// 下载失败
						if (resultData.code === "1") {
    
    
							layer.msg(resultData.msg);
							return false;
						}
					}
				} catch (err) {
    
    
					// 该异常为无法将字符串转为json，说明返回的数据是一个流文件
				}
				// for ie 10 and later
				var headerName = xhr.getResponseHeader("Content-disposition"); // 文件名称
				// IE浏览器 用navigator.msSaveBlo下载传文件流跟文件名称即可
				if (window.navigator.msSaveBlob) {
    
    
					try {
    
    
						window.navigator.msSaveBlo(blob, decodeURI(headerName).substring(20));
					} catch (e) {
    
    
						console.log(e);
					}
				}
				// 谷歌浏览器 创建a标签 添加download属性下载
				else {
    
    
					var a = document.createElement('a');
					a.download = decodeURI(headerName).substring(20);// 设置下载文件名称
					a.style.display = 'none';
					a.href = URL.createObjectURL(blob);// 返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
					document.body.appendChild(a);
					a.click();
					URL.revokeObjectURL(a.href);// 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
					document.body.removeChild(a);
				}
			};

			// 将blob对象以文本的方式读出，读出完成后将会执行 onload 方法
			reader.readAsText(blob);
		} 
	};
	xhr.send(JSON.stringify(formData));
}

vue文件下载

和ie下载基本类似只是用了axios组件有一些就不用自己手写

用的是vue3+ts的写法

downFile()// 下载

// 下载
  public downFile() {
    
    
    const loading = loadingPop('文件正在下载中...');
    downloadTemplateFile({
    
     fileCode: 'DOWNLOAD_DIFFERENCE_PRICE_TEMPLATE' })
      .then((res) => {
    
    
        asyncExport(res, loading);
        this.$message.success('下载成功');
      })
      .catch(() => {
    
    
        loading.close();
        this.$message.error('下载失败');
      });
  }

// 下载
export const downloadTemplateFile = (data: any) => request({
    
    
  url: "/ahpwfzjs-facade/ahpwfzjs/downloadfile/downloadTemplateFile.do",
  method: 'post',
  data,
  responseType: 'blob'
})

// 下载功能
export const asyncExport = (res: any, loading?: any, name?: string) => {
    
    
    let blobs = res;// 请求返回的文件流
    let url = window.URL.createObjectURL(res);
    let fileName = name || AuthModule.fileName;
    fileName = fileName.replace(/\"/g, "");
    if (!fileName) {
    
    
      loading && loading.close();
      return
    }
    // // IE浏览器 用navigator.msSaveBlo下载传文件流跟文件名称即可
    if (!!window.ActiveXObject ||"ActiveXObject" in window || navigator.userAgent.indexOf("Edge") > -1
    ) {
    
    
      navigator.msSaveBlob(blobs, fileName);
      loading && loading.close();
    } else {
    
     // 通过a标签下载 
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      loading && loading.close();
    }
    AuthModule.Set_FileName("");
  };