vue 数据导出

思路:

  1、点击导出按钮,调用后台接口获取数据fid
  2、调用下载接口,获取文件流
  3、把文件流传给封装的下载方法

一、在目录下面准备mixins文件里面建file.js文件

 blobToExcel(res, name) {
      var blob = new Blob([res], {
        type: 'application/octet-stream;charset=utf-8'
      }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, name)
      } else {
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = `${name}` // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      }
    },

二、页面中使用

 <el-button
            @click="exportData"
            type="primary"
            icon="el-icon-download"
            v-if="$hasPermission('tour_results_export')"
            >数据导出
          </el-button>
import { exportData } from "@/api/result/planner_search_result"; //导出接口
import { downloadByBolb, findDict } from "@/api/common"; //接口
import { fileExport } from "@/mixins/file.js";
export default {
  mixins: [fileExport],
data(){
return:{

       }
  methods: {

 //数据导出
    exportData() {
      exportData(this.filterForm).then((res) => { 
        let data = res.data.data; //获取下载数据fid
        if (data.fileType == 2) {  // 判断是否可以直接下载
          this.exportBolb(data.fid); 
        } else {
          this.$message({
            message: "请在‘系统管理->文件管理’模块下载 ",
            center: true,
          });
        }
      });
    },
    //文件下载
    exportBolb(id) { //通过数据id下载
      downloadByBolb(id).then((res) => {
        let file = res.data; // 拿到数据文件流
        this.blobToExcel(file, "拜访计划数据.csv"); //调用封装下载的方法
      });
    },

       }
    }
}

注意:下载接口需要拼接  responseType: 'blob'

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值