前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5 处理服务器返回的 excel 二进制流

H5 处理服务器返回的 excel 二进制流

作者头像
White feathe
发布2021-12-08 15:15:30
6210
发布2021-12-08 15:15:30
举报
文章被收录于专栏:White feathe 的博客

当服务器计算excel ,返回数据超级慢的情况下,需要加入 loadding 显示,采用 xhr.responseType = 'arraybuffer' 设置类型,进行 发送请求,回调回来的数据为 二进制流,设置 window.navigator.msSaveOrOpenBlob 支持 ie10+,搜狗浏览器兼容模式场景!

H5 处理服务器返回的 excel 二进制流加入 loadding
代码语言:javascript
复制
sendDown(urls, callback) {
  let that = this;
  var cur = Promise.resolve();
  urls.forEach(function(url) {
    cur = cur.then(function() {
      return that.downFile(url, callback);
    });
  });
  return cur;
},
/**
 *
 * @param {下载接口请求} url
 * @param {*} callback
 */
downFile(url, callback) {
  let filename = '';
  let xhr = '';
  return new Promise(function(resolve, reject) {
    filename = url.substring(url.lastIndexOf('/') + 1).split('?')[0];
    xhr = new XMLHttpRequest();

    xhr.onload = function() {
      resolve(xhr);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);

    try {
      xhr.responseType = 'arraybuffer'; //arraybuffer , blob
    } catch (err) {
      console.error(err);
    }
    xhr.send();
  }).then(xhr => {
    var blob = new Blob([xhr.response], { type: 'application/vnd.ms-excel' });

    if (window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, 'data.xlsx');
    } else {
      var downloadUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = downloadUrl;
      a.download = 'data.xlsx';
      document.body.appendChild(a);
      a.click();
    }

    return callback && callback(xhr);
  });
},
appendQuery(data) {
  var arr = [];
  for (var i in data) {
    //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
    arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
  }
  return arr.join('&');
},

调用

代码语言:javascript
复制
let URL = that.appendQuery(data.param);
this.sendDown(
    [`${utils.url.curr}/sylla/phr-ui/bonuspm/report/export?${URL}`],
    req => {
      that.loaddingSpinShow = false;
    },
);

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/07/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • H5 处理服务器返回的 excel 二进制流加入 loadding
相关产品与服务
云服务器
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档