vue2中实现文件下载

1、api方法的写法

在前端项目中，可能有很多地方需要用到文件的上传和下载，这里的接口如果和其他接口一样编写的话，可能就会出现报错情况，这里给了一种参考写法来提高工作效率

//接口api写法
export function exportTemplate(params,token) {
     // 需要⽤原⽣axios: 
     return axios.create({
        // 请求路径前缀, 按需填写:
        baseURL: "/api",
        // 请求超时时间, 0即可
        timeout: 0,
    })({
        url: api.exportTemplate,
        method: "post",
        params: params,
        headers: {
            // 携带请求头, 按需填写:
            'Authorization': 'Bearer ' + token,
        },
        // 固定写法, 必填:
        responseType: 'blob'
    });
}

2、点击按钮下载文件

上面是调用接口api的方法，这里将点击按钮调用上面的方法来实现下载功能

uploadTemplate(type) {
	 let params = {
	    workId: this.workId,
	    mode: type,
	    projectId: this.$store.state.projectId,
	  };
	  exportTemplate(params, this.$store.state.token).then((res) => {
	    const link = document.createElement("a");
	    // 创建Blob对象, 固定写法
	    let blob = new Blob([res.data], {type: "application/x-download"});
	    // 设置元素样式不可⻅
	    link.style.display = "none";
	    // 创建下载链接
	    link.href = URL.createObjectURL(blob);
	    // 获取⽂件名(后端应确保正确返回⽂件名)
	    const fileName = `${
	      type == 1 ? "新增" : "更新"
	    }台账模板.xlsx`;
	    link.setAttribute("download", fileName);
	    // 加⼊dom树
	    document.body.appendChild(link);
	    // ⼿动触发点击事件
	    link.click();
	    // 移除之前创建的元素
	    document.body.removeChild(link);
	    // 释放Blob对象
	    window.URL.revokeObjectURL(link.href);
	  });
	},

这里就实现了文件下载功能