文件下载方式

直接下载

针对一些浏览器无法识别的文件格式。可以直接在地址栏上出入URL即可触发浏览器的下载功能。

同类的还有window.location.href、window.open

地址栏输入文件URL
window.location.href = URL
window.open(URL)

使用a标签download属性

直接下载仅使用的浏览器无法识别的文件。如果是浏览器支持的文件格式（如：html、jpg、png）等。则不会触发文件下载，而是被浏览器直接触发解析展示。

针对这种情况，我们可以使用a标签的download属性，可以设置文件名。

<a href="/images/download.jpg" download="myFileName">

开发中，我们遇到的还有一部分场景是js直接触发下载，也是相同的做法，我们可以手动写一个a标签。appen到body里边，触发下载之后，将其remove

const download = (filename, link) => {
    let DownloadLink = document.createElement('a'); 
    DownloadLink.style = 'display: none'; // 创建一个隐藏的a标签
    DownloadLink.download = filename;
    DownloadLink.href = link;
    document.body.appendChild(DownloadLink);
    DownloadLink.click(); // 触发a标签的click事件
    document.body.removeChild(DownloadLink);
}

注意：使用a链接无法实现一次触发多个下载链接，使用iframe标签可以解决这个问题

使用iframe标签下载文件

//iframe下载文件
function downloadFileByIfr(downLoadUrl) {
  // 移除旧的节点
  const oldNode = document.querySelector("#download-iframe")
  if (oldNode) {
    document.body.removeChild(document.querySelector("#download-iframe"))
  }
  // 生成新节点，进行下载
  const iframe = document.createElement("iframe")
  iframe.style.display = "none"
  iframe.id = "download-iframe"
  iframe.src = downLoadUrl
  document.body.appendChild(iframe)
}

后端兼容处理attachment

有很多场景。有些浏览器可识别的文件格式，我们还是需要直接下载的情况（如：用户直接分享的下载pdf、txt；很多浏览器也是支持展示的）。

这种情况下，我们需要声明一下文件的header的 Content-Disposition信息。告诉浏览器，该链接为下载附件链接，并且可以声明文件名（方式二也可以下载该类型文件，不过文件名会以header设置的文件名优先）。同类的方法还有将文件作为outstream返回

Content-Disposition: attachment; filename="filename.xls"

`axios`下载

在部分场景中，有一些文件，需要用户登录之后根据权限来开放下载（报表等）。此时，我们需要将本地的用户信息传给服务端。常用的方式如：在header增加token。

axios({
    method:'get',
    url: '/download/file.doc'
    // responseType 值可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'blob',
    headers: {
        Authorization: '123456'
    },
    onDownloadProgress: function (e) {
       // 对原生进度事件的处理
         console.log('进度计算',(e.loaded/e.total*100).toFixed(2)+'%')
    },
}).then(res => {
    const blob = new Blob([res])
    const fileUrl = window.URL.createObjectURL(blob)
    const DownloadLink = document.createElement('a')
    DownloadLink.style = 'display: none'
    DownloadLink.download = 'filename'
    DownloadLink.href = fileUrl
    document.body.appendChild(DownloadLink)
    DownloadLink.click()
    document.body.removeChild(DownloadLink)
    window.URL.revokeObjectURL(fileUrl)
})

使用`iframe` 实现文件的批量下载

export const downloadFile = (url) => {
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";  // 防止影响页面
    iframe.style.height = 0;  // 防止影响页面
    iframe.src = url; 
    document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
    /* iframe.onload = function () {
        document.body.removeAttribute(iframe) // 之后删除iframe
    } */
    // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
    setTimeout(()=>{
      iframe.remove();
    }, 5 * 60 * 1000);
}

downloadFileList(orderAttachment){
  for(var i =0;i<orderAttachment.length;i++){  //循环遍历调用downloadFile方法
    const url = orderAttachment[i].attachPath;
     downloadFile(url);         
  }
},