一、需求说明

public文件夹下的静态资源文件下载，前端处理

二、文件路径展示

三、解决方法

代码如下：

<span @click="downloadFile('/需要下载的模板文件.xlsx','模板.xlsx')">点击下载</span>
 

 
// 下载
downloadFile (url,fileName) {   
    const x = new XMLHttpRequest();
    x.open("GET", url, true);
    x.responseType = "blob";
    x.onload = function () {
        const url = window.URL.createObjectURL(x.response);
        const elink = document.createElement("a");
        elink.href = url;
        elink.target = "_self"; // 当前也 target打开新页面
        elink.setAttribute("download", fileName);
        elink.style.display = "none";
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    };
    x.send();
},

四、参考链接

vue-cli4前端实现下载本地Excel模板，以及下载静态文件的坑_vue下载本地静态文件-CSDN博客