实现纯前端文件下载

// 将方法封装到common.js文件中

// 我的token存储的位置
import { useUserStore } from "/@/store/modules/user";

export function download(data){
    // 处理token
	const userStore = useUserStore();
	const token = userStore.getToken;
	const headers = "Bearer " + token

    // 创建请求
	var xhr = new XMLHttpRequest();

    // 由调用时传入的请求地址
	var url = data.fileUrl //请求地址
	xhr.open('get', url, true);
	xhr.responseType = "blob"; // 返回类型blob
	xhr.setRequestHeader('Authorization', headers); // 携带token校验
	xhr.onload = function() {
		if (this.status === 200) {
			var blob = this.response;
			var reader = new FileReader();
			reader.readAsDataURL(blob); // 转换为base64
			reader.onload = function(e) {
				var a = document.createElement("a"); // 创建一个a标签用于下载
				a.download = data.fileName; //文件名
				a.href = e.target.result;
				// $("body").append(a);
				document.body.appendChild(a)
				a.click();
				// $(a).remove();
			};
		}
	}
	xhr.send(); // 发送ajax请求
}

// 在使用下载方法的文件中引入
import { download } from '../common.js'


// 下载按钮添加事件
<a @click="downloadHandle(data)">下载</a>
// data数据格式
// data= {
//    fileName: "2022-04-013-客户箱单发票模板(1).xlsx"
//    fileType: "xlsx"
//    fileUrl: "/storage/file/frontocean-dev/3-客户箱单发票模板(1)_1648807175059.xlsx"
//    id: "CMohju9Q"
}

// 调用
const downloadHandle = (data) => {
	download(data)
}