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

时间 2019-11-11

标签后端根据查询条件生成 excel 文件返回前端 vue 进行下载栏目 Microsoft Office 繁體版

原文原文链接

1、HTML代码ios

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

2、JS代码axios

// 根据查询条件下载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)
  })
}

3、axios的设置app

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