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'