前端下载文件的两种方式post和get

文章目录

  • 一、使用post
  • 二、使用get
  • 总结
  • 欢迎底下留言,一起学习进步!


一、使用post


// 生成excel
export function GeneratExcel(data) {
  return request({
    url: '/artifact/download_list/',
    method: 'post',
    data,
    responseType: 'blob'
  })
}
GeneratExcel(this.deployList).then(res => {
   constblob = res.data
   const reader = new FileReader()
   reader.readAsDataURL(blob)
   reader.onload = (e) => {
     const a = document.createElement('a')
     a.download = `${this.deployForm.customer}.sh`
     a.href = e.target.result
     document.body.appendChild(a)
     a.click()
     document.body.removeChild(a)
   }
 })

二、使用get

getFile(url, filename) {
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none' // 防止影响页面
  iframe.style.height = 0 // 防止影响页面
  iframe.src = url
  document.body.appendChild(iframe) // 这一行必须,iframe挂在到dom树上才会发请求
}

总结

前端下载文件的主要方式就是通过创建iframe或者a标签的节点,使用它们自身的特性来达到下载文件的目的。
至于,选择post方式进行下载,则需要前端对后台传过来的数据进行文件流的处理。

欢迎底下留言,一起学习进步!

你可能感兴趣的:(前端,javascript,vue)