前端通过给定连接下载文件并命名

130 阅读1分钟

方法1:

通过a标签,指定资源地址href和文件名称download (注意,这里的download只有同源时有效,比如是一个oss上的资源地址,download会无效)

方法2:

通过XMLHttpRequest发起一个get请求,指定返回blob,再将blob传入a标签下载

// 使用
getBlob(url, (blob) => {
  this.saveAs(blob, file.name)
})

getBlob (url, cb) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  // 指定返回blob
  xhr.responseType = 'blob'
  xhr.onload = function () {
    if (xhr.status === 200) {
      cb(xhr.response)
    }
  }
  xhr.send()
},
  
/**
* 保存
* @param   {Blob} blob 
* @param   {String} filename 想要保存的文件名称 
*/
saveAs (blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    const body = document.querySelector('body')
    link.href = window.URL.createObjectURL(blob)
    link.download = filename

    // fix Firefox
    link.style.display = 'none'
    body.appendChild(link)

    link.click()
    body.removeChild(link)

    window.URL.revokeObjectURL(link.href)
  }
}