web前端

html下载文件(不使用浏览器的预览)

当HTML中有做文件下载的时候,会出现浏览器直接解析文件进行在线预览的情况,解决这个问题的原理,就是创建一个ajax请求,通过blob文件流进行下载,具体代码如下:

const fileUrl = 'http://xxx.pdf'
const fileName = '文件下载.pdf'
const ajax = new XMLHttpRequest()
if (!ajax) {
  console.warn('不支持下载')
  return false
}
ajax.open('GET', fileUrl, true)
ajax.responseType = 'blob'
ajax.onreadystatechange = function() {
  if (ajax.readyState === XMLHttpRequest.DONE) {
    if (ajax.status === 200) {
      const url = URL.createObjectURL(ajax.response)
      const aEl = document.createElement('a')
      aEl.download = fileName
      aEl.href = url
      aEl.click()
      URL.revokeObjectURL(url)
    } else {
      console.error(ajax)
    }
  }
}
ajax.send()

发表评论

邮箱地址不会被公开。