後端根據查詢條件生成excel文件返回給前端,vue進行下載

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'
  })
}
相關文章
相關標籤/搜索