vue独立提供模板下载功能

需求描述：页面需要下载模板文件（word、excel），这些文件是固定的，如果存储在服务端，由后端负责返回数据流，前端再处理数据流则太浪费性能。把文件放到前端，用户下载时直接提供。但是传统的前端项目(html/css/js)是无法做到获取文件。

1.将这部分静态的文件放入到public目录

可以参考命名一个static的文件夹，将所有静态资源放入到该文件夹中

放入public的文件最终会直接打包到前端服务器

当然，还有另外一种方法。静态资源文件可以放置在src目录下的static文件夹，然后通过copy-webpack-plugin，在webpack的配置文件中为static文件夹配置复制处理的操作，在此不做演示，有兴趣可以自己试试。

直接复制到public比较粗暴，比较直接

2.验证

打包后的文件，已经可以通过服务器访问到这个资源。运行项目，通过localhost:8080访问项目正常，在8080后面接我们的文件路径即可获得一个下载链接，如：localhost:8080/static/files/userTemplate.xls

打开这里链接即可自动下载

 

3.编写代码

用户如何触发下载？点击下载时通过window对象获取当前网页的域名（ip）端口号等，触发下载事件

 loadDownImportExcel(){
   let xieyi = window.location.href.split("://")[0];
   let host = window.location.host;
   let pathname = window.location.pathname
   let baseUrl = xieyi + '://' + host + pathname
 
   const link = document.createElement('a')
   link.style.display = 'none'
   link.setAttribute('href', baseUrl + '/static/files/userTemplate.xls')
   link.download = '用户导入模板' + new Date().getTime() //下载的文件名
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
},