2017网站风格,网络推广的几种方式,用cms创建自己带数据库的网站和在本机搭建网站运行平台的心得体会,加强主流网站建设需求#xff1a;点击按钮下载文件#xff0c;请求后端接口#xff0c;后端返回文件流#xff0c;如果遇到错误信息并不能简单的res.message拿到错误提示#xff0c;而且想要正常下载前端也需要做些处理。 1.请求接口要加上响应类型为blob#xff0c; responseType: ‘blo… 需求点击按钮下载文件请求后端接口后端返回文件流如果遇到错误信息并不能简单的res.message拿到错误提示而且想要正常下载前端也需要做些处理。 1.请求接口要加上响应类型为blob responseType: ‘blob’如
function logsDownload(params) {return axios.get(xxx/xxx/xxx,{params,responseType: blob})
}2.定义一个下载的方法
function download(fileName log, type: txt | json, file:Blob) {const blob new Blob([file]);// 获取heads中的filename文件名const downloadElement document.createElement(a);// 创建下载的链接const href window.URL.createObjectURL(blob);downloadElement.href href;// 下载后文件名downloadElement.download ${fileName}.${type}document.body.appendChild(downloadElement);// 点击下载downloadElement.click();// 下载完成移除元素document.body.removeChild(downloadElement);// 释放掉blob对象window.URL.revokeObjectURL(href);
}3.借助FileReader对象实现FileReader.readAsText(data)开始读取指定的Blob中的内容。 result属性中将包含一个字符串以表示所读取的文件内容。 读取操作完成时触发FileReader.onload()在这里通过reader.result拿到读取的文件内容即后端返回值然后对其json序列化即可拿到后端返回的message然后进行相应的展示即可。
// 定义一个读取文件的方法
async function readFileAsText (file:File){const fileReader new FileReader()let textawait new Promise(resolve{fileReader.onLoad (){text fileReader.resultresolve(true)}fileReader.readAsText(file, utf8)})return text || }
4.请求成功和失败的返回结果是不同 请求下载一个文件请求成功时返回的是一个文件流type是对应文件类型例如text/xml正常导出文件 而请求失败的时候返回的是json type为application/json不会处理错误信息而是直接导出包含错误信息的文件。 但是无论成功还是失败返回的结果都是blob格式的文件流。 因此可以通过返回的blob数据type类型进行区分如果type是文件类型导出文件如果type是json则把blob数据转为string处理错误信息。 在响应拦截器那里加入以下需要判断如果时文件流直接返回的情况
// 响应拦截器
banseInstance.interceptors.response.use(response {...// 文件流直接返回if (response .request.responseType blob ) {if (response .data.type application/json) {const res await readFileAsText(response.data)ElMessage.error(JSON.parse(res).message || 下载失败)return false;} else {return response .data;}}...
}
点击按钮下载 const handleDown () {const fileName xxxxconst file await logsDownload(params)if (file) {download(fileName, txt, file)ElMessage.success(下载成功)}}
