vue blob流下载zip文件

Z时代
2024-01-10
分类：综合

vue

需求是这样的......

具体实现,前端拿到后端返回回来的数据,然后通过Blob实现下载,文件内容样式啥的都是后端写

vue blob流下载zip文件

this.axios({
  url: baseUrl + '/mails/downloadZipFile',
  method: 'GET',
  responseType: 'arraybuffer',
  params: {
    strMailId: this.parm['strMailId']
  }
}).then((res) => {
  const content = res.data
  const blob = new Blob([content], {type: "application/zip"})
  var timestamp = (new Date()).valueOf();
  const fileName = timestamp + '.zip'
  if ('download' in document.createElement('a')) { // 非IE下载
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    window.URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  } else { // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}).catch((err) => {
  console.log(err);
})

转载文章：https://blog.csdn.net/Thekingyu/article/details/103140848

this.axios({
  url: baseUrl + '/mails/downloadZipFile',
  method: 'GET',
  responseType: 'arraybuffer',
  params: {
    strMailId: this.parm['strMailId']
  }
}).then((res) => {
  const content = res.data
  const blob = new Blob([content], {type: "application/zip"})
  var timestamp = (new Date()).valueOf();
  const fileName = timestamp + '.zip'
  if ('download' in document.createElement('a')) { // 非IE下载
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = window.URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    window.URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  } else { // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}).catch((err) => {
  console.log(err);
})