1、把后端给的excel文件放到本地项目文件夹中,asset目录下
2、在需要展示下载功能的页面中引入该excel文件
import fileUrl from '@/assets/file/xxx.xlsx';
3、使用a链接,href绑定引入的excel文件路径,并添加download属性,download属性值就是下载下来的文件名称
<a download="xxxx.xlsx" :href="fileUrl">模板下载</a>
4、重点问题来了,引入文件路径后会发现项目报缺少loader的错误,所以要安装file-loader:
npm install file-loader或者yarn add file-loader
注意:使用elementui,版本号要与elementui中的file-loader的版本号保持一致,不然会导致elementu内部图标失效问题
5、安装完依赖之后还要在vue.config.js中chainWebpack增加配置:
config.module
.rule('file-loader')
.test(/\.(xlsx|pdf|xls|doc)$/)
.use('file-loader?name=[path][name].[ext]')
.loader('file-loader')
.end()
6、重启项目即可
7、参考文章: