vue 通过从后端获取的文件地址将excel文件下载到本地

方法很简单,地址一定要正确

可以先自己在百度上找个免费能下载的文件进行测试,如果百度文档的下载地址能成功实现,那前端就没问题了

1. 用a标签

这个很重要的一点是,给的下载地址一定一定要正确,要能下载,如果地址正确,那么直接在地址栏输入地址就能打开该文件.

如果失败那基本上是地址的问题了...

 如果不加速http://的话  axios 会认为你那是一个API接口，而不是一个域名

1).

<a href="http://xxx.xxx.x.x:xxxx/报表.xls" download="报表.xls" style="color:#fff;">下载报表</a>

2). 

<Button  type="primary" @click="downloadReports()">
    手动创建a标签
</Button>

downloadReports () {
        reqDownloadExcel().then(res => { // reqDownloadExcel接口函数,从后端获取地址
            var downloadPath = res.excel_path;
            console.log('获得地址数据:', downloadPath)
            var downloadLink = document.createElement('a')
            downloadLink.style.display = 'none' // 使其隐藏
            downloadLink.href = downloadPath
            downloadLink.download = ''
            downloadLink.click()
            document.body.removeChild(downloadLink);
          }).catch(err => console.log('下载失败', err))
      }

2. 利用 js-file-download 插件下载

<Button type="primary" @click="downloadReports()">
   <span class="iconfont" />
   下载报表
</Button>

  export default {
    data () {
      return {
        downloadUrl: '',
      }
    }
  }

downloadReports () {
  reqDownloadExcel().then(res => {  //reqDonloadExcel请求接口的函数
     var downloadPath = res.excel_path;
     this.downloadUrl = downloadPath; //将从后端获取的文件地址付给downloadUrl变量
  }).catch(err => console.log(err))
    console.log('获得地址:', this.downloadUrl)
    axios.get(this.downloadUrl, { responseType: 'blob' }).then(res => { fileDownload(res.data, '分析报表.xls') })
}

通过 js-file-download 插件

1. 安装

npm install js-file-download --S

2. 使用

import axios from 'axios'
import fileDownload from 'js-file-download'



axios.get('文件地址', {
  responseType: 'blob' //返回的数据类型
})
.then(res => {
  fileDownload(res.data, this.fileName)  //this.fileName 文件名
})

 参考 :https://www.jb51.net/article/211978.htm