需求描述:页面需要下载模板文件(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)
},