前端下载文件方式总结

1. 后端返回二进制流下载

返回的好像乱码一样的文件，一般都是后端返回设置为HttpServletResponse

• 发送请求： 需要将responseType设置为'blod'或'arraybuffer'，以获取二进制数据 Blob（BinaryLargeObject）：代表不可变的、类似文件的原始数据的二进制对象。 ArrayBuffer：表示一个通用的、固定长度的原始二进制数据缓冲区。
• 处理相应：将相应的二进制数据转换为Blob对象
• 创建a标签：创建<a>标签,并将其href属性设置为Blob对象的url
• 下载文件：触发<a>标签，下载文件

axios({
    url: '', // 后端接口请求地址
    method: 'post', // 请求方式
    responseType: 'blob', // 指定相应类型为blob或者arraybuffer
}).then(response => {
    const link = document.createElement('a')
      const blob = new Blob([response.data], {
        type: 'application/vnd.ms-excel',
      })
      var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
      var contentDisposition = decodeURI(
        response.headers['content-disposition']
      )
      var result = patt.exec(contentDisposition)
      var fileName = result[1]
      fileName = fileName.replace(/\"/g, '')
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', fileName) // 自定义文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
}).catch(() => {
    console.log("下载失败")
})

2. 后端返回的是一个下载链接

这种的就比较简单，直接下载就OK了

    const link = document.createElement("a");
    link.style.display = "none";
    link.href = response.url; // 下载的地址
    link.download = '自定义文件名.doc'; // 下载的地址
    link.target = '-black' // 新开一个标签
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);