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);
      });
    }

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