程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

一，直接使用

 download() {
      const link = document.createElement("a");
      link.style.display = "none";
      //请求后台的具体地址
      link.href =
        "http://192.168.5.69:8000/api1/cardGiveBatchEntity/account/template/download";
      link.setAttribute("download", "文件名称.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      }

二，vue中使用文件流进行下载(new Blob)

get请求获取

  axios({
        url: "/cardGiveBatchEntity/account/template/download",
        method: "get",
        //vue axios(下载文件流)设置返回值类型responseType:‘blob‘
        responseType: "blob", 
      })
        .then((res) => {
          console.log(res);
          //解析文件充blod中解析
          const url = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/vnd.ms-excel" })
          );
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "文件名称.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log(err);
        });

由于get可以如此用，

var params={ XX:xx, }
this.$axios.get('/XXX/XXX',{
    params: params,
    responseType: 'blob'
}).then(res => {
    console.log(res);
});

若是封装的话则使用：

post请求获取

   axios
          .post("/cardGiveBatchEntity/account/template/download", "", {
            headers: {},
            responseType: "blob",
          })
          .then((res) => {
            console.log(res);
            const url = window.URL.createObjectURL(
              new Blob([res.data], { type: "application/vnd.ms-excel" })
            );
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "文件名称.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((err) => {
            console.log(err);
          });

post封装的操作：

原文链接:https://blog.csdn.net/caoluotuo/article/details/120575707