定義方法：
utils.js
/**
*
* @param url 目標(biāo)下載接口
* @param query 查詢參數(shù)
* @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 響應(yīng)結(jié)果
* @returns
*/
export function handleBlobFile(response: any, fileName: string) {
// 處理返回的文件流
const blob = response;
if (blob && blob.size === 0) {
ElMessage.error('內(nèi)容為空，無法下載');
return;
}
const link = document.createElement('a');
// 兼容一下 入?yún)⒉皇?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);
}使用文章來源：http://www.zghlxwxcb.cn/news/detail-664508.html
test.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-664508.html
// 參數(shù)1：導(dǎo)出接口，參數(shù)2：參數(shù)，參數(shù)3：文件名
downBlobFile('/xxx/xxx/xxx', {id}, `附件.${type}`);到了這里，關(guān)于vue3文件下載功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
