zoukankan      html  css  js  c++  java
  • vue-element-admin后台返回数据流导出Excel

    vue-element-admin后台返回文件流导出Excel, 自用!

    原因: 项目导出有表格合并,后台做的处理,但是返回的是文件流 数据流

    参考

    html

      <el-button type="primary" @click="handleExportExcel">导出</el-button>

    api

    // 采购管理
    import request from "@/utils/request";
    
    // 采购管理 - 采购订单列表页 - 导出接口
    export function exportExcel(data) {
      return request({
        url: "/purchase/order/export",
        method: "get",
        params: data,
        responseType:'blob'
      });
    }
    

      

    js

     // 导出数据
        handleExportExcel(){
          this.loading = true
          // 接口多选 要的字符串 数组字符串需要来回转换
          this.searchForm.status = this.orderStatus.join(",");
          const param = Object.assign({}, this.searchForm);
          // console.log(param);
          // 接口获取数据
          Api.exportExcel(param)
            .then(res => {
              this.loading = false
              // const { code, data, msg, total } = res.data
              const aLink = document.createElement("a");
              let blob = new Blob([res], {type: "application/vnd.ms-excel"});
              aLink.href = URL.createObjectURL(blob);
              // 导出数据名称 带日期形式模板是"20201007-20210501采购订单"  如果把2020-10-07转化为20201007 转化方法replace(/[-]/g,"")
              aLink.setAttribute('download',this.searchForm.date_from.replace(/[-]/g,"") +'-'+this.searchForm.date_to.replace(/[-]/g,"") +'采购订单' + '.xlsx') ;
              aLink.click()
              this.$refs.loadElement.appendChild(aLink)
            }).catch(error => {
              this.loading = false
            })
        },
  • 相关阅读:
    openssl windows ndk 编译----0
    openssl windows ndk 编译
    android Android NDK开发2之Windows及L下的gcc手动编译(交叉连编译
    list 和 set 的区别
    Arrays.toString()方法和Arrays类 的一些概念
    几个简单的面试题
    大脑记忆(自我总结)
    DI() T()函数
    Latex设置
    selenium获取元素信息的方法
  • 原文地址:https://www.cnblogs.com/wangduojing/p/13822260.html
Copyright © 2011-2022 走看看