vue中如何下载文件导出保存到本地

关于“Vue中如何下载文件导出保存到本地”的完整攻略，以下是步骤解释和代码示例：

步骤解释：

1. 创建一个下载链接

我们可以通过创建一个 <a> 标签来实现文件下载，设置它的 href 属性指向要下载的文件路径，然后通过设置 download 属性来强制浏览器下载该文件。

1. 通过axios请求服务器数据

使用 axios 可以轻松地向后端发送请求。比如我们要从后端获取一个文件下载的路径，只需要在请求中指定要下载的文件路径，返回的内容就是文件的二进制数据。

1. 处理后端返回的二进制数据

需要在axios中设置responseType属性为'blob'，这样返回的数据类型是二进制的blob数据，然后这个blob对象可以通过URL.createObjectURL方法转换成一个可下载的文件url。

4.下载并保存到本地

通过设置我们在步骤1创建的 <a> 标签上的 href 属性为我们在步骤3创建的可下载文件url，再通过触发<a>元素的点击事件来实现下载。

代码示例1：axios请求二进制数据下载文件

<template>
  <button @click="downloadFile">下载文件</button>
</template>
<script>
import axios from 'axios'

export default {
  methods: {
    async downloadFile() {
      //请求下载文件的url
      const res = await axios({
        url: 'http://localhost:8080/api/download',
        method: 'GET',
        responseType: 'blob'
      })
      //将二进制的Blob数据转换成可下载的url
      const url = URL.createObjectURL(res.data)
      //创建一个 a 标签，设置下载的url，触发下载
      const link = document.createElement('a')
      link.href = url
      link.download = 'file.txt' //设置文件名
      link.click()
      //释放url对象
      URL.revokeObjectURL(url)
    }
  }
}
</script>

代码示例2：使用axios下载Excel文件

该示例是下载Excel文件的高级用法。我们可以通过 Blob() 函数把接口返回的字符串创建成 Blob 实例对象，再创建一个 URL 对象（可下载的文件 URL），通过 <a> 标签的 click() 来触发下载，之后再调用 URL.revokeObjectURL() 来释放 URL 对象。

<template>
  <button @click="downloadExcel">下载Excel文件</button>
</template>
<script>
import axios from 'axios'

export default {
  methods: {
    async downloadExcel() {
      try {
        const response = await axios.get('http://localhost:8080/api/staffs', {
          responseType: 'blob'
        })
        const blob = new Blob([response.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })

        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'staffs.xlsx')
        document.body.appendChild(link)
        link.click()
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

以上就是Vue中如何下载文件导出保存到本地的完整攻略及代码示例。