element-ui:el-button（公司学习）

最新推荐文章于 2025-09-03 10:36:07 发布

原创最新推荐文章于 2025-09-03 10:36:07 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

Vue学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的下载模板功能。通过点击按钮触发文件下载，涉及前端元素操作及URL处理。

1、在点击button按钮后，发送一个请求：

<el-button style="float:left; margin-right:10px"  type="primary" @click="exportTemplate()" :loading="downloading">
    {{$t('hardware.DownloadTemplate')}}
</el-button> 

    exportTemplate(){
      this.downloading = true
      let fileName = 'hardware_counter_template.xlsx'
      const elink = document.createElement('a')//建一个a标签
      elink.style.display = 'none'//设置标签style属性
      elink.href = '/fs/' + fileName//设置标签href
      document.body.appendChild(elink)//页面中添加这个标签
      elink.click()//点击这个标签
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)//从页面上移除这个标签
      setTimeout(()=>{this.downloading = false}, 800)//0.8秒按钮失效

    },