vue+Element-ui实现模板文件下载
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
最近实现一个功能,数据过多,录入系统的时候过慢,所以新增一个导入数据的功能。
导入数据的话,为了防止用户随意输入,或者不知道怎么输入,所以特完成模板下载功能。
通常情况下实现模板下载采用a标签即可实现如下(前提是在前端工程中的public 目录下必须能找到以下路径):
<a href="/doc/XXX模板.xlsx">模板下载</a>
但是为了美观,在页面使用按钮的方式进行实现,采用的前端组件库是:Element-ui 实现方式有以下两种:
1.使用window.location.href 实现
页面添加按钮如下:
<el-button type="text" icon="el-icon-download" @click="onDownload">模版下载</el-button>
下载方法如下(前提是在前端工程中的public 目录下必须能找到以下路径):
//下载模版
onDownload(){
window.location.href = '/doc/xxx模板.xlsx'
}
2.采用创建a标签对象的方式实现:
页面添加按钮如下:
<el-button type="text" icon="el-icon-download" @click="onDownload">模版下载</el-button>
下载方法如下(前提是在前端工程中的public 目录下必须能找到以下路径):
onDownload(){
let a = document.createElement("a");
a.href = "/doc/xxx模板.xlsx";
a.download = "XXX模板.xlsx";
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献12条内容
所有评论(0)