Vue 文件-图片等格式下载

// 下载申请附件接口
 export function downloadApplyAnnex(query) {
  return request({
    url: '*********',
    method: 'post',
    responseType:'blob',  // 接口上要加 responseType:'blob'
    params: query
  })
}
 


 <a @click="handleBatchDownload(item.id, item.name)"></a> // 拿到数据的id和文件名称

   // 文件下载
  async handleBatchDownload(data, fileName) {
      this.appendix.id = data;
      try {
        const res = await downloadAnnex(this.appendix); // 走接口
        const blob = new Blob([res], { type: res.type });
        this.$download.saveAs(blob, fileName);
      } catch (error) {
        this.$message.error(error);
      }
    },
  createExcel(res, fileName) {
      if (res.size > 0) {
        let blob = new Blob([res], { type: res.type });
        // 允许用户在客户端上保存文件
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          //释放内存
          window.URL.revokeObjectURL(link.href);
        }
      } else {
        // IE10+下载
        navigator.msSaveBlob(res, fileName);
      }
    },