vue实现文件下载

一、
第一步：获取文件的 fileId (或者别的什么的，总之应该是代表这个文件的东西)，各家后台需要的都不一样

第二步：调用接口

this.$http({
　　　　　　url:this.HOST + api.download,
　　　　　　method:‘post’,
　　　　　　params:{
　　　　　　　　fileId:fileId //此处上传第一步获取到的 fileid
　　　　　　},
　　　　　　responseType:‘arraybuffer’ //此处注意请求头
　　　　　　}).then(function(res){
　　　　　　　　var this = that
　　　　　　　　var fileName = that.files.name //此处获取文件名称
　　　　　　　　that.download(res.data,fileName) //此处跳转到第三步
　　　　　　})
　　
　　第三步：处理返回值，并下载
　　　　　　
　　　　download (data,fileName) {
　　　　　　if (!data) {
　　　　　　　　return
　　　　　　}
　　　　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
　　　　　　let link = document.createElement(‘a’) //创建a标签
　　　　　　link.style.display = ‘none’ //将a标签隐藏
　　　　　　link.href = url //给a标签添加下载链接
　　　　　　link.setAttribute(‘download’, fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
　　　　　　document.body.appendChild(link)
　　　　　　link.click() //执行a标签
　　　　　　}
　　　　
二、axio request实现

data.js
import request from '@/utils/request'
import qs from 'qs'
export function  function download(url, params) {
  return request({
    url: url + '?' + qs.stringify(params, { indices: false }),//拼接URL地址
    method: 'get',
    responseType: 'blob'//blob类型
  })
}
下载文件
export function downloadFile(obj, name, suffix) {
  const url = window.URL.createObjectURL(new Blob([obj]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  var time = parseTime(new Date())
  time = time.slice(0, 10)
  const fileName = time + '-' + name + '.' + suffix//文件名称加了时间
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}