前端实现文件下载的方式

1.若是后端定义的接口是下载文件的路径。这种下载方式简单粗暴：方法不少，任君选择：

•  window.open(url) 
  
• location.href = url
  
• 建立a标签的方式： < a href = url download = “文件名.doc“ > </a>
  
•  建立iframe方式：<iframe src=url></iframe >
  
• 表单提交方式： < form method = “get“ action = url > </form>
  

关于如何动态建立标签去下载，下面的第二种方法以a标签为例

2.若是后端定义的接口是返回的是文件的二进制流。

这种方式须要你将返回的二进制blob对象，写入文件，而后实现下载。翠花，上源码。。。
(看完大家尽管去尝试，下载不了算我输)

axios({
  method: 'get',
  url: `${baseUrl}/pur/contract/export/${ids}`,  // 你本身的下载地址
  responseType: 'blob'     // responseType须要根据接口响应的数据类型去设置
}).then(res => {
  let blob = new Blob([res.data], {
    type: 'application/octet-stream'  // 下载的文件类型格式（二进制流，不知道下载文件类型能够设置为这个）, 具体请查看HTTP Content-type 对照表
  })
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {  // IE下对blob的兼容处理
    window.navigator.msSaveOrOpenBlob(blob, '合同列表.xlsx');
    return
  }
  let url = URL.createObjectURL(blob)
  let a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.setAttribute('download', '合同列表.xls')   // 设置下载的文件名
  document.body.appendChild(a) 
  a.click()
  document.body.removeChild(a)       //下载完成移除dom元素
  URL.revokeObjectURL(url)     //释放掉blob对象
}
  复制代码

如下就是下载成功后的截图：

3.总结

为何会有这两种下载方式呢？

通常状况下，想要实现文件下载/导出功能，须要在前端发送下载请求到服务端，而后由服务端经过 获取数据 -> 生成数据 -> 生成文件三个步骤，而且在响应请求头设置Content-Disposition: attachment;filename=***.doc 用于指定文件类型、文件名和文件编码等，浏览器接收到响应后就会触发下载行为。可是有时候这种交互是一种多余的资源和带宽消耗，这时候客户端根据收到的二进制流信息写入文件，生成下载任务，能节省很多的资源和时间开销。

看完这篇文章，妈妈不再用担忧前端的我要怎么处理后台返回的文件流了。据说昨天有一个朋友看了个人文章后而且点了个赞，就中了五百万，不知道是否是真的...听到他说这句话, 我反手就是一个点赞加666，写博客的动力都瞬间提高很多.... 后续我将会持续更新一些我在项目上应用的一些例子，但愿对大家有所帮助！谢谢。。。