最近实现一个功能,数据过多,录入系统的时候过慢,所以新增一个导入数据的功能。
导入数据的话,为了防止用户随意输入,或者不知道怎么输入,所以特完成模板下载功能。
通常情况下实现模板下载采用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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐