vue3文件下载功能

tingkeiii2023-08-23 9:56

定义方法：

utils.js

javascript 复制代码

/**
 *
 * @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);
}

使用

test.vue

javascript 复制代码

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