vue2 根据后端返回的数组进行下载成压缩包到本地

Question

前端把他搞成zip并下载，目前点击按钮后提示下载成功但是打不开，说是不是zip文件

后端返回格式和控制台打印

代码如下：

//一键下载
export function download(params) {
  return request({
    url: 'distributor/download/' + params,
    method: 'get',
   // responseType: 'json',
   // headers: {
      'Content-Type': 'application/json',
    },
  })
}
<el-button v-if="isLink === true&&this.NOlink!=true" id="download-btn" @click="downloadTable"
        style="margin-bottom: 10px;">一键下载</el-button>    
      //弹窗--链接
      handleLink(row) {
        this.numberTitle = '生成二维码'
        this.numberDialog = true
        this.isLink = true
        this.linkID = row.id
        const params =
          row.id +
          '&page=' +
          this.queryForm.page +
          '&perPage=' +
          this.queryForm.perPage
        getListLinks(params).then((res) => {
          this.numberDialogList = res.data
          // 检查 numberDialogList 数组中所有元素的 link 属性是否都为空字符串
          this.NOlink = this.numberDialogList.every((v) => v.link === '')
          this.numberDialogTotal = res.meta.pagination.total
        })
      },   
      async downloadTable() {
        try {
          // 调用 download 函数并传入必要的参数，例如商品ID
          console.log('this.linkID', this.linkID)
          //const response = await download(this.linkID);
          const response = await download(this.linkID, { responseType: 'blob' });//设置响应返回的数据类型
          // 检查响应状态
          console.log('response', response)
          // 将数组转换为 JSON 格式的字符串
          const data = JSON.stringify(response) //ok
          // console.log(JSON.parse(data) )
          // 创建一个新的 Blob 对象，以正确类型的数据来处理下载
         // const blob = new Blob([data], {
         //   type: 'application/json'
          //});
          const blob = new Blob([response], {type: 'application/zip'});
          console.log('blob', blob)
          // 创建一个链接元素，用于触发下载
          const downloadUrl = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = downloadUrl;
          // 设置下载文件的名字（这里以 'file.zip' 为例）
          link.setAttribute('download', 'file.zip');
          // 模拟点击链接，触发下载
          document.body.appendChild(link);
          link.click();
          // 清理DOM
          document.body.removeChild(link);
          window.URL.revokeObjectURL(downloadUrl);
          // 可选：显示下载成功的提示信息
          this.$baseMessage('下载成功', 'success');
        } catch (error) {
          console.log(error)
          this.$baseMessage('下载失败', 'error');
        }
      },

Answer 1

检查后端返回数据是否符合Zip格式，确认内容类型（Content-Type）为"application/zip"。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。