黑豹程序员-vue3下载文件

最新推荐文章于 2024-08-28 17:48:43 发布

长安紫薯

最新推荐文章于 2024-08-28 17:48:43 发布

阅读量639

点赞数 6

分类专栏：黑豹程序员 Vue 文章标签： vue 下载

本文链接：https://blog.csdn.net/nutony/article/details/135269332

版权

黑豹程序员同时被 2 个专栏收录

98 篇文章 3 订阅

订阅专栏

Vue

27 篇文章 0 订阅

订阅专栏

原理

vue3利用在页面中动态创建a标签，设置a标签属性，触发a标签的click实现文件下载。

代码

在前端工程的public资源目录下，创建template模板文件目录，把要下周的模板文件放入：product-dir.xlsx

        <el-button type="warning" size="small" @click="fileDownload(`/template/product-dir.xlsx`)">
          <el-icon><Document /></el-icon>&nbsp;模板下载
        </el-button>

const fileDownload = (url) => {
  //url:下载文件的url
  const a = document.createElement('a')
  a.setAttribute('download', '产品目录模板.xlsx')
  a.setAttribute('target', '_blank')
  a.setAttribute('href', url)
  a.click()
}