vue中使用一个标签下载静态资源文件（如excel、pdf等）后台不参与

问题描述通常我们需要在项目中做下载文件的功能，比如下载excel表格，比如下载pdf文件，比如下载word文档，这样的功能一般都是后台完成的，即：后台返回一个流文件，或者返回一个url地址。不过，其实前端也是可以做的。很简单，用a标签的下载功能就可以了。但是要注意静态文件的存放位置。注意前端静态资源的下载适用于固定数据，不与数据库交互的数据，比如excel模板，比如notes.docx文档等等。相反，放在后端做会更合适。步骤第一步是在public文件夹下新建一个static文件夹，用来存放静态资源。在我们vue项目的public文件夹下新建一个static文件夹。这个文件夹里面存放的是我们需要下载的静态资源文件，如下图，我存放的地方我创建了一个模板.xlsx文件，后面需要下载。当然静态文件夹可以存放pdf文件，word文件等。也可以在static文件夹下创建文件夹进行精细化存放，只要a标签下载时路径匹配即可，这里不再赘述。注意这里需要在public文件夹下新建文件夹存放静态资源，不能在src文件夹下新建文件夹存放静态资源，因为public文件夹下的文件资源不会被打包编译npm运行构建。如果你打包的话，你会发现template.xlsx文件存放在dist/static文件夹中。第二步，模拟a标签下载文件。假设我们点击按钮下载静态资源。代码如下：//html本地下载//jsfrontDownload(){vara=document.createElement("a");//创建一个标签a.href="/static/template.xlsx";//将地址添加到a标签的href属性值中，注意这里是绝对路径，不用加点号。a.download="下载.xlsx";//设置下载文件的文件名，添加.xlsx指定文件类型，pdf文件指定.fpda.style.display="none";//隐藏a标签document.body.appendChild(a);//给文档对象追加a标签a.click();//模拟点击a标签，会触发读取a标签的href，浏览器会自动下载a.remove();//一次性的可以，用完就把a标签删掉}如果是后台返回文件地址的形式，a.href的值就是后台返回的地址。总结以上代码，a标签可以访问前端静态资源并下载。好记性不如烂笔，记录一下