uniapp 移动端H5 下载文件 xls 实现

背景：

目前项目是用在移动端的H5, uniapp 构建的项目。需求是：后台掊口返回文件二进制文件，在移动端浏览器实现文件下载，uniapp好几个掊口不太支持H5

uni.downloadFile(OBJECT)

使用上面下载之后 ：

#1 uni.saveFile(OBJECT) 不支持H5

# 2 uni.openDocument(OBJECT) 不支持H5

解决方案：

使用原生H5的<a>标签，加上XMLHttpRequest请求完成下载。

最终效果：

源码：

.vue

<template>
 <u-button class="dl-btn" style="width:670rpx;" @click="handleBtnEvent" :disabled="!downloadEnable"
              :data-action="false">下载对账单
    </u-button>
</template>

<script>
export default{
data(){
return {url}
},
methods(){
handleBtnEvent(e) {//ok
      if (e.target.dataset.action) {
        console.log('支付')
      } else {
        console.log('|-------下载,start')
        let url = `${uni.getStorageSync('serverName')}/msmstr/file?`
        this.url = url
        downLoadFileH5(this.url)
        }
    },
},
 downLoadFileH5 = (url, name = 'download', type = '文件') => {
  /*#ifdef H5*/
  console.log('|--下载')
  uni.showLoading({title: '正在下载..'})
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer'; // 返回类型blob
  xhr.onload = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('|--下载完成', this)
      uni.hideLoading()
      uni.showToast({title:'下载完成'})
      let blob = this.response;
      // 转换一个blob链接
      // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
      // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
      let downLoadUrl = ''
      if (type === '视频') {
        downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
          type: 'video/mp4'
        }));
      } else if (type === '图片' || type === '文件') {
        downLoadUrl = url
      }
      // 视频的type是video/mp4，图片是image/jpeg
      // 01.创建a标签
      let a = document.createElement('a');
      // 02.给a标签的属性download设定名称
      a.download = name;
      // 03.设置下载的文件名
      a.href = downLoadUrl;
      // 04.对a标签做一个隐藏处理
      a.style.display = 'none';
      // 05.向文档中添加a标签
      document.body.appendChild(a);
      // 06.启动点击事件
      a.click();
      // 07.下载完毕删除此标签
      a.remove();
    }

  };
  xhr.send()
  /*#endif*/
},
}
}
</script>