淘先锋技术网

首页 1 2 3 4 5 6 7

今天我们来讲一下如何使用Vue实现文件下载功能。在实际项目中,很多时候需要将文件提供给用户进行下载。下面是一个简单的Demo,演示了如何使用Vue、axios和FileSaver.js实现文件下载功能。



<template>
  <div>
    <button @click="download">Download</button>
  </div>
</template>
 
<script>
import axios from 'axios'
import fileSaver from 'file-saver'
 
export default {
  methods: {
    async download() {
      const response = await axios.post('/api/download', {}, { responseType: 'blob' })
      const fileName = 'example.xlsx'
      fileSaver.saveAs(new Blob([response.data]), fileName)
    }
  }
}
</script>


vue文件下载demo

在代码中,我们首先引入了axios和FileSaver.js库,然后定义了一个下载方法。当用户点击Download按钮时,我们向服务器发送一个POST请求,请求的数据为空对象。然后设置responseType为blob,该参数代表我们请求的数据为二进制数据。服务器返回一个二进制文件,我们将其转换为Blob对象,然后使用FileSaver.js提供的saveAs方法在客户端进行文件保存操作。注意保存的文件名需要与服务器返回的文件名一样,否则在部分浏览器下会报错。

以上就是我们的Vue文件下载的一个简单实现,希望对大家有所帮助!