前端实现文件下载的方式

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 对照表
  })
  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，写博客的动力都瞬间提升不少.... 后续我将会持续更新一些我在项目上应用的一些例子，希望对你们有所帮助！谢谢。。。

转载于:https://juejin.im/post/5d254a846fb9a07efd47337e