vue2+elementUI后端返回二进制流，前端下载实现

后端返回样例数据：

javascript 复制代码

{
    "data": "PK\u0003\u0004\u0014\u0000\b\b\b\u0000,T][\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u00007\u0000\u0000\u0000易华录GIT代码提交规范V1.3.2(8) (1)(35)(1).docxt�\u0003�hM�6:�m۶m۶m۶ms�m��c{f\u000f�~�sO�����]��Ve���<]�IZA\u001a\u0018\u0004\n��\u0016.w(\u0000#�b��_^>��\\�/\u000b\"HC�=�Ό@�H�臽\u0003\t8q�9�7�_�/�S\u0011K��\u0004\u0000\boLob�fγ�ן�������7\u0000P0000\u00000\u0000\u0000\u0000易华录GIT代码提交规范V1.3.2(8)(19).docx�V*.I,)-V���QJI,IT��+���QJ-*�/r�OIU�22200��(Y)��g��\u0005�X���Ʀg�\u0017<�ڡT\u000b\u0000PK\u0007\b�Ea,E\u0000\u0000\u0000G\u0000\u0000\u0000PK\u0001\u0002\u0014\u0000\u0014\u0000\b\b\b\u0000,T][Z�#�\u00187\u0000ra7\u00007\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000GIT代码提交规范V1.3.2(8) (1)(35)(1).docxPK\u0001\u0002\u0014\u0000\u0014\u0000\b\b\b\u0000-T][�Ea,E\u0000\u0000\u0000G\u0000\u0000\u00000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\f\u00197\u0000GIT代码提交规范V1.3.2(8)(19).docxPK\u0005\u0006\u0000\u0000\u0000\u0000\u0002\u0000\u0002\u0000�\u0000\u0000\u0000�\u00197\u0000\u0000\u0000",
    "status": 200,
    "statusText": "OK",
    "headers": {
        "connection": "close",
        "content-disposition": "attachment; filename=%E6%95%B4%E4%BD%93%E6%B5%8B%E8%AF%951-API-%E4%BA%A4%E4%BB%98%E7%89%A9.zip",
        "content-type": "application/octet-stream;charset=UTF-8",
        "date": "Wed, 29 Oct 2025 02:33:25 GMT",
        "transfer-encoding": "chunked",
        "x-powered-by": "Express"
    },
    "config": {
        "url": "/databank/demandClaim/downloadDeliverFiles/1433029026363117568",
        "method": "post",
        "data": "{}",
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=utf-8",
            "tokenp": "3qhE/YMa69PKeIJGcKC6pfy1nOCQyhldjMgM8UeSLJg="
        },
        "baseURL": "",
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 60000,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1
    },
    "request": {}
}

前端需要引入的方法

import axios from 'axios'

import { Encrypt, getCookie } from '@/utils/api'

@/utils/api ↓↓

javascript 复制代码

//公共方法一：
export function Encrypt(word) {
  var key = cryptoJS.enc.Utf8.parse(secretKey)

  var srcs = cryptoJS.enc.Utf8.parse(word)
  var encrypted = cryptoJS.AES.encrypt(srcs, key, {
    mode: cryptoJS.mode.ECB,
    padding: cryptoJS.pad.Pkcs7,
  })
  return encrypted.toString()
}
export function Decrypt(word) {
  var key = cryptoJS.enc.Utf8.parse(secretKey)

  var decrypt = cryptoJS.AES.decrypt(word, key, {
    mode: cryptoJS.mode.ECB,
    padding: cryptoJS.pad.Pkcs7,
  })
  return cryptoJS.enc.Utf8.stringify(decrypt).toString()
}

//公共方法二（这个一般都有）：
export function getCookie(name) {
  var arr = document.cookie.split('; ')
  for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split('=')
    if (arr2[0] == name) {
      return arr2[1]
    }
  }
  return ''
}

前端方法

javascript 复制代码

 //下载交付物
    watchdownload(item) {
      console.log('下载交付物')
      let year = new Date().getFullYear() + ''
      let month = new Date().getMonth() + 1 + ''
      let day = new Date().getDate() + ''
      let hour = new Date().getHours() + ''
      let str =
        'ehl' +
        year +
        '' +
        (month.length == 1 ? '0' + month : month) +
        '' +
        (day.length == 1 ? '0' + day : day) +
        '' +
        (hour.length == 1 ? '0' + hour : hour) +
        '' +
        'ehlbank'
      axios({
        method: 'post',
        url: '/datab/deman/这个位置需要你自己的下载地址/' + item.claimId, // 请求地址及参数
        // data: , // 参数
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          tokenp: Encrypt(str),
          token: getCookie('token'),
          userId: getCookie('userId'),
        },
        responseType: 'blob', // 表明返回服务器返回的数据类型
      }).then(res => {
        console.log(res)
        if (window.navigator.msSaveBlob) {
          //IE以及IE内核的浏览器
          try {
            window.navigator.msSaveBlob(res.data, file.name) //response为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([response.data]) 注意这里需要是数组形式的,fileNm就是下载之后的文件名
            // window.navigator.msSaveOrOpenBlob(response, fileNm); //此方法类似上面的方法，区别可自行百度
          } catch (e) {
            console.log(e)
          }
        } else {
          //在headers中截取filename
          var filename = res.headers //下载后文件名
          filename = filename['content-disposition']
          filename = filename.split(';')[1].split('filename=')[1]
          var blob = new Blob([res.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = decodeURI(filename)
          //此处也可以将filename写死 "filename.xlsx"
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        }
      })
    },

本文章直接拿去能用最好，不能用就当提供个解题思路吧，我这边用这个方法，下载功能是可以用的，