vue中如何下载excel流文件及设置下载文件名

下面我将详细讲解一下“Vue中如何下载Excel流文件及设置下载文件名”的攻略。

方案1：使用FileSaver.js库

安装

我们需要先安装FileSaver.js库，可以使用npm安装：

npm install file-saver --save

具体实现

在需要下载Excel文件的地方，我们可以创建一个Blob对象，用于存储Excel文件的二进制数据。接着，我们可以调用saveAs方法将Blob对象保存为Excel文件。代码示例如下：

<template>
  <button @click="downloadExcel">下载Excel文件</button>
</template>

<script>
import { saveAs } from 'file-saver'

export default {
  methods: {
    async downloadExcel() {
      try {
        // 发起请求获取Excel文件流数据
        const response = await this.$http.get('http://example.com/api/downloadExcel', {
          responseType: 'blob'
        })

        // 创建Blob对象
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })

        // 将Blob对象保存为Excel文件
        saveAs(blob, 'example.xlsx')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在上面的代码中，我们使用了saveAs方法来将Blob对象保存为Excel文件，第一个参数为Blob对象，第二个参数为Excel文件的文件名。需要注意的是，需要从服务器端返回Excel的content-type为application/vnd.ms-excel，否则可能无法正常打开Excel文件。

示例

假设我们已经有一个名为exportExcel的接口，它可以导出Excel数据。以下是如何使用FileSaver.js在Vue中下载Excel文件的完整代码示例：

<template>
  <button @click="downloadExcel">下载Excel文件</button>
</template>

<script>
import { saveAs } from 'file-saver'

export default {
  methods: {
    async downloadExcel() {
      try {
        // 发起请求获取Excel文件流数据
        const response = await this.$http.get('http://example.com/api/exportExcel', {
          responseType: 'blob'
        })

        // 创建Blob对象
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })

        // 将Blob对象保存为Excel文件
        saveAs(blob, 'example.xlsx')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

方案2：使用axios和js-file-download库

安装

我们需要先安装axios和js-file-download库，可以使用npm安装：

npm install axios file-download --save

具体实现

与方案1类似，我们也需要从服务器端获取Excel文件流数据，并将其保存为Excel文件。不过这里我们需要用到axios来发送请求，并使用js-file-download库来下载文件。代码示例如下：

<template>
  <button @click="downloadExcel">下载Excel文件</button>
</template>

<script>
import axios from 'axios'
import fileDownload from 'js-file-download'

export default {
  methods: {
    async downloadExcel() {
      try {
        // 发起请求获取Excel文件流数据
        const response = await axios.get('http://example.com/api/exportExcel', {
          responseType: 'blob'
        })

        // 将Blob对象保存为Excel文件
        fileDownload(response.data, 'example.xlsx')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在上面的代码中，我们使用了axios来发送请求，需要注意的是，需要设置responseType为blob，表示我们要获取Excel文件的二进制数据。然后，我们使用js-file-download库来将Blob对象保存为Excel文件，第一个参数为Blob对象，第二个参数为Excel文件的文件名。

示例

假设我们已经有一个名为exportExcel的接口，它可以导出Excel数据。以下是如何使用axios和js-file-download在Vue中下载Excel文件的完整代码示例：

<template>
  <button @click="downloadExcel">下载Excel文件</button>
</template>

<script>
import axios from 'axios'
import fileDownload from 'js-file-download'

export default {
  methods: {
    async downloadExcel() {
      try {
        // 发起请求获取Excel文件流数据
        const response = await axios.get('http://example.com/api/exportExcel', {
          responseType: 'blob'
        })

        // 将Blob对象保存为Excel文件
        fileDownload(response.data, 'example.xlsx')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

以上就是用Vue下载Excel文件的两个方案及示例说明。希望对你有所帮助。