后端根据查询条件生成excel文件返回给前端，vue进行下载

一、HTML代码

<el-col :xs="2" :md="2" :sm="3">
    <el-button type="primary" style="width:100%;" @click.stop="handleDownloadExecl">导 出</el-button>
</el-col>

二、JS代码

// 根据查询条件下载excel
handleDownloadExecl () {
  downloadDisabilityListExcelApi(this.searchForm).then(info => {
    if (!info) {
      return
    }
    let url = window.URL.createObjectURL(info)
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('id', 'downloadLink')
    link.setAttribute('download', '残疾人信息表.xls')
    document.body.appendChild(link)
    link.click()
    // 删除添加的a链接
    let objLink = document.getElementById('downloadLink')
    document.body.removeChild(objLink)
    // 释放内存
    window.URL.revokeOjbectURL(url)
  })
}

三、axios的设置

export function downloadDisabilityListExcelApi (data) {
  return service({
    url: `/excel/excelDownloads`,
    method: 'GET',
    params: data,
    responseType: 'blob'
  })
}

 

转载于:https://www.cnblogs.com/llcdxh/p/9875250.html