美文网首页
ajax 文件下载

ajax 文件下载

作者: Rose_yang | 来源:发表于2020-12-11 16:53 被阅读0次

/**

  • ajax 文件下载
  • @param {Object} config 下载的文件配置 url、timeout、callback
  • 返回请求成功或失败
    */
export function fileDownload (config) {
  var xhr = new XMLHttpRequest()
  var dataPath = config.url
  xhr.open('GET', dataPath)
  // xhr.onprogress = function (event) {
  //   console.log(event)
  //   //   console.log(Math.round((event.loaded / event.total) * 100) + '%')
  // }
  xhr.responseType = 'arraybuffer'
  xhr.timeout = config.timeout || 1 * 60 * 1000
  xhr.addEventListener('readystatechange', function (event) {
    // console.log(event)
    if (xhr.status === 200 && xhr.readyState === 4) {
      var contentDisposition = xhr.getResponseHeader('Content-disposition')
      var contentType = xhr.getResponseHeader('Content-type')
      var blob = new Blob([xhr.response], {
        type: contentType
      })
      var url = window.URL.createObjectURL(blob)
      var regex = /filename=[^;]*/
      var matchs = contentDisposition.match(regex)
      var filename = ''
      if (matchs) {
        filename = decodeURIComponent(matchs[0].split('=')[1])
      } else {
        filename = +Date.now() + '.xlsx'
      }
      var a = document.createElement('a')
      a.href = url
      a.download = filename
      a.click()
      window.URL.revokeObjectURL(url)
      config.callBack && config.callBack(true)
    }
  })
  xhr.ontimeout = function () {
    // console.log('timeout...')
    config.callBack && config.callBack(false)
  }
  xhr.withCredentials = true
  xhr.send()
}

相关文章

  • ajax 文件下载

    /** ajax 文件下载 @param {Object} config 下载的文件配置 url、timeout、...

  • AJAX下载文件

    1、由于传递的参数比较多,网页动态指定需要下载的文件,所以希望使用post方式传递参数。2、ajax方式请求的数据...

  • Ajax文件下载问题

    一、Ajax文件下载问题还原 1、前端代码 2、后天代码 3、结果展示 PC没有展示下载信息,响应头正确,数据也正...

  • 2020-09-11

    面试先是问了文件流下载,然后又问了ajax请求 原来考点是在:ajax无法请求流文件,需要使用XMLHttpReq...

  • xhr.responseType 作用

    1. 下载文件后格式错误 ajax 下载文件成功后,打开提示格式损坏,源代码如下: 将 responseType ...

  • ajax文件上传和文件下载

    1.文件上传 FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于...

  • ajax请求下载文件

    写在前面 本方法兼容至ie10+,有其他兼容需求者避免入坑(smile~) 实现基础: createObjectU...

  • AJAX进行文件下载

    JQuery的ajax函数的返回类型只 有xml、text、json、html等类型,没有“流”类型,所以我们要实...

  • angular ajax 下载流文件

  • 如何下载Excel(或其他等)大文件

    下载Excel等大文件时,我们通过ajax请求到二进制的data数据,再利用Blob对象包装,即可实现下载大文件。...

网友评论

      本文标题:ajax 文件下载

      本文链接:https://www.haomeiwen.com/subject/qedboctx.html