定义方法：
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-ignore
URL.revokeObjectURL(blob);
document.body.removeChild(link);
}, 0);
}使用文章来源：https://www.toymoban.com/news/detail-664508.html
test.vue文章来源地址https://www.toymoban.com/news/detail-664508.html
// 参数1：导出接口，参数2：参数，参数3：文件名
downBlobFile('/xxx/xxx/xxx', {id}, `附件.${type}`);到了这里，关于vue3文件下载功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
