vue + js 封装下载文件的方法（对不同浏览器作兼容）

关注

原创 2024-06-20 15:26:34 364 阅读 AI 写同款· GEO 优化 ›

vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程 vue项目的前期配置封装axios实例封装API 阅读详情

import {
	ElMessage
} from 'element-plus'

export default function downloadFile(res, fileName) {
	const blob = res;

	const downloadElement = document.createElement('a');
	const href = window.URL.createObjectURL(blob);
	downloadElement.href = href;
	const userAgent = navigator.userAgent;
	const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
	const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
	const isEdge = userAgent.indexOf('Edge') > -1;
	if (isIE || isIE11 || isEdge) {
		navigator.msSaveBlob(blob, fileName);
	} else {
		downloadElement.download = fileName;
		document.body.appendChild(downloadElement);
		downloadElement.click();
		document.body.removeChild(downloadElement);
		window.URL.revokeObjectURL(href);
	}
}

element-plus在这里主要使用ElMessage对信息进行提示，可以用其他方法或组件库代替。