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