vue3文件下载功能

定义方法：

utils.js

/**** @param url 目标下载接口* @param query 查询参数* @param fileName 文件名称* @returns {*}*/
export function downBlobFile(url: any, query: any, fileName: string) {return request({//url: url,method: 'get',responseType: 'blob',params: query,}).then((response) => {handleBlobFile(response, fileName);});
}/*** blob 文件刘处理* @param response 响应结果* @returns*/
export function handleBlobFile(response: any, fileName: string) {// 处理返回的文件流const blob = response;if (blob && blob.size === 0) {ElMessage.error('内容为空，无法下载');return;}const link = document.createElement('a');// 兼容一下 入参不是 File Blob 类型情况var binaryData = [] as any;binaryData.push(response);link.href = window.URL.createObjectURL(new Blob(binaryData));link.download = fileName;document.body.appendChild(link);link.click();window.setTimeout(function () {// @ts-ignoreURL.revokeObjectURL(blob);document.body.removeChild(link);}, 0);
}

使用

test.vue

  // 参数1：导出接口，参数2：参数，参数3：文件名downBlobFile('/xxx/xxx/xxx', {id}, `附件.${type}`);