vue blob流下载zip

vue blob流下载zip

// request.js
service.interceptors.response.use(
  response => {
    const res = response.data
    if (!res.code) {
      return res
    } else if (res.code !== 10000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

// api.js
export function fileDownload(id) {
  return request({
    url: '/url/fileDownload',
    method: 'get',
    responseType: 'arraybuffer', // 必须要有
    params: { id }
  })
}

方法一

// download.html
download() {
    fileDownload(pro.ids).then(res => {
        const blob = new Blob([res], { type: 'application/zip' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        const fileName = (new Date()).valueOf() + '.zip'
        downloadElement.href = href
        downloadElement.download = fileName
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
    })
}

方法二

// download.html
download() {
    fileDownload(pro.ids).then(res => {
        const content = res
        const blob = new Blob([content], { type: 'application/zip' })= 
        const fileName = (new Date()).valueOf() + '.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)
        }
    })
}