vue3 + element puls+js 下载elcel表格方法

最新推荐文章于 2024-06-27 10:28:05 发布

祁靖杰

最新推荐文章于 2024-06-27 10:28:05 发布

阅读量293

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_69424722/article/details/127782284

版权

这篇博客详细介绍了如何在Vue项目中实现一个模板下载的功能。通过HTML和JS代码示例，展示了如何创建一个按钮，监听点击事件，并调用downloadTemplateFile方法下载xlsx文件。在下载过程中，利用createElement创建隐藏的a标签，设置下载属性和href，然后模拟点击触发文件下载。当下载失败时，会显示警告信息。

摘要由CSDN通过智能技术生成

效果图：

html代码

<el-button class="btn_default" type="primary" style="background-color: #0075c2;width:5vw"
            @click="downloadTemplate">
            <template #icon>
              <span class="btn-text">模板下载</span>
            </template>
</el-button>

js代码

const downloadTempFile = () => {
  let param = {
    route: '/warehouseManage/inventorySet',
    indexCode: '1'
  }
  return new Promise((resolve, reject) => {
    downloadTemplateFile(param).then(res => {
      if (res.data.code == '0') {
        const eleLink = document.createElement('a')
        eleLink.download = 'xxxx.xlsx'
        eleLink.style.display = 'none'
        eleLink.href = res.data.data
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
      } else {
        ElMessage.warning(`下载失败，${res.data.message}`)
      }
      resolve(true)
    }).catch(err => {
      ElMessage.warning(`下载失败，${res.data.message}`)
      reject(false)
    })
  })
}