vue项目纯前端下载本地静态文件

一、下载本地文件

1.把文件放在public文件夹下
2.把a标签写在了方法里，href后是文件的路径（注意！！“process.env.BASE_URL”代表public）

<Button type="primary" @click="getDownload" icon="ios-download-outline">导入模板</Button>

getDownload(){
      const anchor = document.createElement("a");
      anchor.href = `${process.env.BASE_URL}static/file/工价维护.xlsx`;
      anchor.setAttribute("download", '工价维护.xlsx');
      anchor.innerHTML = "downloading...";
      anchor.style.display = "none";
      document.body.appendChild(anchor);
      setTimeout(() => {
          anchor.click();
          document.body.removeChild(anchor);
          setTimeout(() => { self.URL.revokeObjectURL(anchor.href); }, 250);
      }, 66);
    },

二、请求下载文件

1.get请求

function getDownload (url, filename) {
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.setAttribute("download", filename);
    anchor.innerHTML = "downloading...";
    anchor.style.display = "none";
    document.body.appendChild(anchor);
    setTimeout(() => {
        anchor.click();
        document.body.removeChild(anchor);
        setTimeout(() => { self.URL.revokeObjectURL(anchor.href); }, 250);
    }, 66);
}

2.post请求

function getData(){
    axios({
        method: "post",
        url: "/operational/download",
        data: {},
        responseType: "blob",
    }).then((response) => {
        this.download(response, "文件名");
    });
}
 
function download(data, filename) {
    if (!data) {
        return;
    }
    let url = window.URL.createObjectURL(new Blob([data]));
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
}