博客

VUE+ElementUI下载文件的几种方式(小结)

  • Post category:Python

下面是VUE+ElementUI下载文件的几种方式的完整实例教程。

1. 方案选择

为了实现在VUE+ElementUI中下载文件，我们可以采用如下几种方式：

  1. 跳转到下载链接，通过下载链接直接下载文件；
  2. 通过axios的get方法下载文件；
  3. 通过window.open()方法下载文件。

在这三种方式中，方案1和方案3的实现难度较低，但是无法对下载文件进行进度控制；方案2可以对下载文件进行进度控制，但是实现难度较高。因此，我们需要根据实际需要选择相应的方案。

接下来，我们分别介绍这三种方案的实现方式。

2. 跳转到下载链接下载文件

<template>
  <div>
    <el-button type="primary" @click="download">下载文件</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadUrl: '/download/file.xls'
    }
  },
  methods: {
    download() {
      window.location.href = this.downloadUrl
    }
  }
}
</script>

在这个小例子中，我们创建了一个名为downloadUrl的data，存储了要下载的文件的链接。当用户点击“下载文件”按钮时，我们调用download()方法，跳转到downloadUrl链接处，从而实现文件下载的功能。

3. 通过axios的get方法下载文件

<template>
  <div>
    <el-button type="primary" @click="download">下载文件</el-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      downloadUrl: '/download/file.xls'
    }
  },
  methods: {
    download() {
      axios({
        method: 'get',
        url: this.downloadUrl,
        responseType: 'blob'
      })
        .then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'file.xls')
          document.body.appendChild(link)
          link.click()
        })
        .catch(() => {})
    }
  }
}
</script>

在这个小例子中，我们使用了axios库，通过发出get请求，获取到了一个Blob对象，最终将Blob对象保存为Excel表格文件。

4. 通过window.open()方法下载文件

<template>
  <div>
    <el-button type="primary" @click="download">下载文件</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      downloadUrl: '/download/file.xls'
    }
  },
  methods: {
    download() {
      window.open(this.downloadUrl)
    }
  }
}
</script>

在这个小例子中，我们直接使用了window.open()方法，实现了下载功能，调用方法为打开web页面下载文件。

完整代码可参考https://github.com/ElementUI/element-starter/blob/master/src/views/download/index.vue。

希望这篇文章对你有所帮助，谢谢！

Tags: ,