zoukankan      html  css  js  c++  java
  • 后端根据查询条件生成excel文件返回给前端,vue进行下载

    一、HTML代码

    <el-col :xs="2" :md="2" :sm="3">
        <el-button type="primary" style="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'
      })
    }
  • 相关阅读:
    Linux基础优化(二)
    权限
    分页
    序列化
    forms
    redis
    Django缓存机制
    跨域问题
    Django的ORM
    模板层
  • 原文地址:https://www.cnblogs.com/llcdxh/p/9875250.html
Copyright © 2011-2022 走看看