posts - 59,comments - 0,views - 34881

前提:项目中文件导出按钮的文件下载事件,在Edge浏览器上面下载很缓慢并且后端的接口返回的数据都已经返回完,但是前端的下载及其缓慢。这个时候,我并没有做Edge浏览器的兼容处理。
详见如下代码:

点击查看代码
// 下载blob文件
// @param data blob数据
// @param filename 文件名
export function downloadFile(data, filename) {
  if (!data) {
    return
  }
  const bw = getBrowser() // 获取浏览器信息
  if (!bw['edge'] || !bw['ie']) { // 除了edge和ie浏览器之外的浏览器使用a标签下载
    const link = document.createElement('a')
    const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // 指定下载文件的格式
    link.setAttribute('download', filename + '.xls')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else if (bw['ie'] >= 10 || bw['edge'] === 'edge') { //edge和ie浏览器的下载方式
    const _utf = '\uFEFF' // 为了使文件以utf-8的编码模式,同时也是解决中文乱码的问题
    const blob = new Blob([_utf + data], {
      type: 'application/vnd.ms-excel', // 自己需要的数据格式
    })
    navigator.msSaveBlob(blob, filename)
  }
}

function getBrowser() { // 不同浏览器
  const sys = {}
  const ua = navigator.userAgent.toLowerCase()
  if (ua.indexOf('edge') !== -1) {
    sys.edge = 'edge'
  } else if (ua.match(/rv:([\d.]+)\) like gecko/)) {
    sys.ie = ua.match(/rv:([\d.]+)\) like gecko/)[1]
  } else if (ua.match(/msie ([\d.]+)/)) {
    sys.ie = ua.match(/msie ([\d.]+)/)[1]
  } else if (ua.match(/firefox\/([\d.]+)/)) {
    sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
  } else if (ua.match(/chrome\/([\d.]+)/)) {
    sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
  } else if (ua.match(/opera.([\d.]+)/)) {
    sys.opera = ua.match(/opera.([\d.]+)/)[1]
  } else if (ua.match(/version\/([\d.]+).*safari/)) {
    sys.safari = ua.match(/version\/([\d.]+).*safari/)[1]
  }
  return sys
}

posted on   好久不见-库克  阅读(192)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示