关于前端接口实现文件（excel等文件）的下载。

excel下载：
get请求：
   window.location = 'http://*.*.*.*:8772/dataAsset/export?assetType=' + localStorage.getItem('assetType')
post请求：
    <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
 * 封装导出Excal文件请求
 * @param url
 * @param data
 * @returns {Promise}
 */
//api.js
export function exportExcel(url, options = {}) {
  return new Promise((resolve, reject) => {
    console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
    axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
    axios({
      method: 'post',
      url: url, // 请求地址
      data: options, // 参数
      responseType: 'blob' // 表明返回服务器返回的数据类型
    }).then(
      response => {
        resolve(response.data)
        let blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        console.log(blob)
        let fileName = Date.parse(new Date()) + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          // console.log(2)
          navigator.msSaveBlob(blob, fileName)
        } else {
          // console.log(3)
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}
文本下载：.txt
element.click()火狐浏览器不支持
1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）：
 
    <a href="/user/test/xxxx.xls" download="文件名.xls">点击下载</a>
 
  但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;
如果再vue项目中需要下载文件需要放在public文件夹下 需要下载的路径是相对于index.html文件路径 否则会提示下载文件未找到
 
2.window.open()方法，后端提供下载接口：
 
html：
 
<button type="button" id="btn1">window.open()方法下载</button>
 
js：
（最简单：window.location.href="xxxxx后端给的下载地址"）
var $eleBtn1 = $("#btn1");
 
 
//已知一个下载文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
//方法一：window.open()
$eleBtn1.click(function(){
    var url = "https://codeload.github.com/douban/douban-client/legacy.zip/master";
    window.open(url);
});
 
3.通过form表单提交的方式：
 
 
html：
 
<button type="button" id="btn2">form方法下载</button>
 
js：
 
var $eleBtn2 = $("#btn2");
 
//已知一个下载文件的后端接口：
https://codeload.github.com/douban/douban-client/legacy.zip/master
$eleBtn2.click(function(){
    var $eleForm = $("<form method='get'></form>");
 
    $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");
 
    $(document.body).append($eleForm);
 
    //提交表单，实现下载
    $eleForm.submit();
});
 
移动端文件下载
需求在H5页面中添加下载按钮，点击按钮下载对应文件
1
常用方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，进行下载
由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用：
	download () {
		let link = document.createElement('a')
        link.style.display = 'none'
        // 请求文件数据，返回类型为blob数据流，类型application/octet-stream
        link.href = window.URL.createObjectURL(res.data)
        link.download = ''//文件名
        document.head.appendChild(link)
        link.click()
        document.head.removeChild(link)
    }
1
2
3
4
5
6
7
8
9
10
在pc端上调试没有问题，但放到手机上测试时就会出现各种问题，比如点击下载后没有反应，异或是被识别为非法链接不给下载，又或是下载完成后的文件格式不对
在各方查找资料以及同事间讨论之后，发现直接用绝对地址进行下载可行！
download () {
		let link = document.createElement('a')
        link.style.display = 'none'
        let url = `.....`//绝对地址
        link.href = url
        link.download = ''//文件名
        document.head.appendChild(link)
        link.click()
        document.head.removeChild(link)
}
1
2
3
4
5
6
7
8
9
10
手机测试后发现没问题，只有uc浏览器不支持打开zip文件而弹出提示，无法下载
附上资料来源截图一张