前端实现文件下载

自从使用了vue之类的框架后，感觉文件下载都这么麻烦了？记录下前端下载文件的几种方式。

Java后端实现方式

参考 文件下载

a标签直接下载

方式一：
前端代码

<a href="/business/111/export.xls" >下载Excel文档</a>

方式二：

传递指定参数方式下载

<a href="/plugin/download?pluginId=1" >导出当前插件</a>

JavaScript下载

const handleOnSearchExport = (id) => {

    let dom = document.createElement('a')
    dom.href = "/plugin/download?pluginId="+id
    dom.style.display = 'none'
    document.body.appendChild(dom)
    dom.click()
}

axios封装下载？

先来一段搜索到的下载代码，我在几个项目中都见到过类似的代码，果然完成交代的任务就行，资源浪费算什么，复制后能用就行了噻

const handleOnSearchExport = () => {
  console.log("handleOnSearchExport: ");
  axios.post("/chanpush/orderpush/searchExport",
      {"pushDate": queryPushDate.value},
      {headers: {
          'Content-Type': 'application/json',},
        responseType: 'blob',
      }).then((res)=>{
    loading.value = false;

    const { data, headers } = res
    const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')

    const blob = new Blob([data], {type: headers['content-type']})
    let dom = document.createElement('a')
    let url = window.URL.createObjectURL(blob)
    dom.href = url
    dom.download = decodeURI(fileName)
    dom.style.display = 'none'
    document.body.appendChild(dom)
    dom.click()
    dom.parentNode.removeChild(dom)
    window.URL.revokeObjectURL(url)
  }).catch((err,res)=>{
    loading.value = false;
  })
}

fetch封装下载

跟axios差不多相似，既然都是通过a标签下载的为什么非得把所有数据拿到浏览器再封装成url下载？大文件难道不会崩？浏览器内存无限的？浪费时间浪费资源