前端实现文件下载

 1 axios({
 2   method: ‘POST‘,
 3   url: URL.baseUrl + ‘/baseInfo/XXXXXXXXXX‘,
 4   data: regionInfo, // 你要传输的数据 我这里是 regionInfo 一个对象,不具体列出
 5   responseType: ‘blob‘ // 设置返回文件流为 blob 数据流
 6 }).then(res => {
 7   const type =
 8application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8 9   // 创建 blob 对象  res.data:blob 数据流内容  type:默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型
10   let blob = new window.Blob([res.data], { type: type })
11   // 创建文件下载地址(或者是图片资源地址)
12   let requestUrl = window.URL.createObjectURL(blob)
13   // 创建一个 a 标签
14   let link = document.createElement(‘a‘)
15   // 设置标签为不可见
16   link.style.display = ‘none‘
17   // 设置 a 标签链接地址为 文件下载地址(或者是图片资源地址)
18   link.href = requestUrl
19   // HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持) 第二个参数为自定义下载的文件名
20   link.setAttribute(‘download‘, `XXXX.xls`)
21   // 向 body 追加 a 标签
22   document.body.appendChild(link)
23   // 点击下载后释放标签
24   link.click()
25   link.remove()
26 })

第五行responseType详解

第七八行blob 下载文件时 type 类型大全

第十行blob 对象详解

第十二行URL.createObjectURL() 详解

如果下载文件不是 xls 文件,也可用此套代码,只需要更改 对应文件的 type 值和文件的扩展名即可(即代码红色字体内容)。

 

前端实现文件下载

上一篇:centos下jdk的安装和卸载


下一篇:亿图图示 免费VIP会员兑换码激活码礼品券!!!