Vue+ElementUi 项目中导出日志文件功能的实现

场景

界面上有一个导出按钮，点击按钮，从后台获取日志文件数据，将其在浏览器中导出

实现

1、用window.open

window.open可以看做 a 标签的js版本，或者说是编码式地打开窗口。常用来在新的window或新的tab页打开一个页面或文件。
直接在按钮的methods里加上下面的代码，把url换成自己项目的接口地址

window.open('http://localhost:8080/api/mimic_log/export_operation_log')

2、用blob

async handleExport() {
	const res = await exportScanlog()//调接口，请求后台数据
	let blob = new Blob([res], { type: "text/csv" }),// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
	link = document.createElement("a"),//创建一个a标签
	href = window.URL.createObjectURL(blob);//把之前处理好的url,给a标签
	link.href = href;
	link.download = "下载后文件的文件名.csv";
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	window.URL.revokeObjectURL(href); // 释放掉blob对象
}