关于下载功能

• 需求：下载日志，大小不固定，需要导出tar.gz文件格式的包
• 项目框架：Vue
• 问题描述：

// 开发日志-下载
export function downloadDevelopLog (data) {
  return axios({
    url: '/log/hosts:download',
    method: 'post',
    data
  })
}

const FileSaver = require('file-saver') // 使用的插件

downloadDevelopLog({ ids: this.selectedRowKeys }).then(res => {
   const disposition = res.headers['content-disposition']
   const str = disposition.split('; ')[1]
   const fileName = str.substring(str.indexOf('filename="') + 10, str.length - 1)
   
   // 方式一
   // application/x-tar
   FileSaver.saveAs(new Blob([res.data], { type: 'application/x-tar' }), fileName)
   
   // 方式二
   // const url = window.URL.createObjectURL(new Blob([res.data]))
   // const link = document.createElement('a')
   // link.style.display = 'none'
   // link.href = url
   // link.setAttribute('download', fileName)
   // document.body.appendChild(link)
   // link.click()
   // window.URL.revokeObjectURL(link.href)
   // document.body.removeChild(link)
 })

经上述代码运行，发现能正常导出文件，但是压缩包解压失败，本来以为是接口的问题，后来发现是请求接口没有指定responseType为‘blob’格式

正确的写法是：

// 开发日志-下载
export function downloadDevelopLog (data) {
  return axios({
    url: '/log/hosts:download',
    method: 'post',
    responseType: 'blob', // 指定正确的格式
    data
  })
}

================= 关于导出文件名：fileName ========================
如果文件自己指定fileName,那么前端可以任意指定，如果不是前端指定，可以从接口的响应头中的’content-disposition’中读取

================= responseType 的知识补充 ========================
对于下载文件模式的请求，responseType一般可以指定为’blob’,或者’arraybuffer’,
上述case，把responseType的类型指定为arraybuffer，尝试之后也是可以正常导出并解压成功的。

XMLHttpRequest 本身是支持responseType的：
参照文档 MDN Web Docs 中相关知识点【 XMLHttpRequest.responseType】的查看

responseType:'' // 空的 responseType 字符串与默认类型 "text" 相同。

responseType:'arraybuffer' // response 是一个包含二进制数据的 JavaScript ArrayBuffer

responseType:'blob' // response 是一个包含二进制数据的 Blob 对象。

responseType:'document' // response 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。请参阅 XMLHttpRequest 中的 HTML 以了解使用 XHR 获取 HTML 内容的更多信息。

responseType:'json' //  response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象

responseType:'text' //  response 是一个以 DOMString 对象中的文本。

responseType:'ms-stream' // response 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。