data-exporter 数据批量导出

DataExporter 功能组件实现了文件批量导出时，对导出文件的基本信息以及数据列进行定制化的功能组件

组件提供了核心功能模块 DataExporterCore 与弹出窗口模式 DataExporter 等多种方式提供应用，弹出窗口模式作为典型应用方式作为常规应用方式，在有其他应用形式需求时，核心模块具备更多场景整合可能性

• 导出文件基础信息设置

• 数据列定制化

• 弹出窗口模式

安装

安装业务定制化组件集

# 聚合包
npm i -S @plugins-business/main
# 独立包
npm i -S @plugins-business/data-exporter

注意

该组件要求 @plugins-business/main 或 @plugins-business/data-exporter 库版本至少不低于 1.1.0

应用方式

功能组件应用于业务开发的方式

本地组件（推荐）

<template>
  <data-exporter />
</template>

<script>
import { DataExporter } from '@plugins-business/main'

export default {
  components: {
    DataExporter
  }
}
</script>

全局注册

在 plugins.js 文件中设置

import Vue from 'vue'
import { DataExporter } from '@plugins-business/main'

// 应用默认设置
Vue.use(DataExporter)

// 修改自定义设置
Vue.use(DataExporter, {
  fileName: '数据批量导出',
  fileType: 'xls',
  quantity: 1000
})

在业务中即可直接使用该组件

<template>
  <v-data-exporter />
</template>

数据导出方式

应用内置功能按钮，并直接请求获取文件流进行下载

<template>
  <div>
    <div>
      <button
        type="button"
        class="btn btn-primary"
        @click="dialog = true"
      >数据导出</button>
    </div>
    <data-exporter
      v-model="dialog"
      :columns="columns"
      @data-export="doExport"
    />
  </div>
</template>

<script>
import { DataExporter } from '@plugins-business/main'
import { Loading } from 'element-ui'
import { DomHelpers } from '@utils-core/main'
import { post } from '@/config/settings/http'

export default {
  components: {
    DataExporter
  },
  data () {
    dialog: false,
    columns: [
      { key: 'name', name: '姓名' },
      { key: 'sex', name: '性别' },
      { key: 'age', name: '年龄' },
      { key: 'salary', name: '薪资' },
      { key: 'remark', name: '备注' }
    ]
  },
  methods: {
    doExport (exportDetails, columns) {
      // 打开全屏遮罩
      const loading = Loading.service({
        fullscreen: true
      })
      // 参数设置仅作参考
      const params = {
        quantity: exportDetails.quantity,
        columns
      }
      post(url, params, { responseType: 'blob' })
        .then(resp => {
          // resp 为返回的文件流对象
          DomHelpers.Link.download(resp, exportDetails.fullFileName)
        })
        .finally(() => {
          loading.close()
        })
    }
  }
}
</script>

结合 v-download 下载文件

结合文件下载组件 v-download 处理文件导出功能

<template>
  <data-exporter
    v-modal="dialog"
    :columns="columns"
    #default="{ exportDetails, sortedColumns }"
  >
    <!-- 应用全局注册的 v-download -->
    <v-download
      class="btn btn-primary"
      url="/v1/some-business/data-export"
      :file-name="exportDetails.fileName"
      :file-suffix="exportDetails.fileType"
      :params="parseParams(exportDetails, sortedColumns)"
    />
  </data-exporter>
</template>

<script>
import { DataExporter } from '@plugins-business/main'

export default {
  components: {
    DataExporter
  },
  data () {
    return {
      dialog: false,
      columns: [
        { key: 'name', name: '姓名' },
        { key: 'sex', name: '性别' }
      ]
    }
  },
  methods: {
    parseParams (exportDetails, sortedColumns) {
      // 执行操作，并返回指定格式的请求参数
      return {
        ...
      }
    }
  }
}
</script>

选项（props）

value/v-model

• 类型：boolean
• 默认：false

弹出窗口模式中用于控制窗口显示的开关，仅适用于 DataExporter 模块，不适用 DataExporterCore 核心模块

fileName

• 类型：string
• 默认：数据表格

指定默认显示的导出文件名，不包含后缀

fileType

• 类型：string
• 默认：xlsx

指定默认导出的文件格式类型

quantity

• 类型：number
• 默认：5000

指定默认导出记录数量上限

columns

• 类型：sortedColumn[]

数据列清单，数据模型中要求至少要包含 key 与 name 字段，用于应用实际数据列与列名

interface sortedColumn {
  key: string
  name: string
}

示例

<template>
  <data-exporter
    file-name="我的自定义文件"
    file-type="xls"
    :quantity="100"
    :columns="columns"
  />
</template>

<script>
export default {
  ...
  data () {
    return {
      columns: [
        { key: 'name', name: '姓名' },
        { key: 'sex', name: '性别' }
      ]
    }
  }
}
</script>

事件（event）

data-export

• data-export(exportDetails: object, sortedColumns: object[]): void

参数数据格式，该事件仅响应于使用内置的功能按钮模式，若在应用中使用 slot 插槽自定义了功能按钮，则不响应该事件

// 导出文件的完整信息
interface exportDetails {
  // 完整文件名，包含文件后缀，例：`用户订单信息.xlsx`
  fullFileName: string
  // 文件名，不包含文件类型
  fileName: string
  // 文件类型
  fileType: string
  // 导出记录数
  quantity: number
}

interface sortedColumn {
  key: string
  name: string
}

// 定制化后的数据列清单
sortedColumns: sortedColumn[]

插槽（slot）

插件的 DataExporter 弹窗模式与 DataExporterCore 核心模块均支持了 slot 插槽的方式对 下载 按钮进行自定义

<template>
  <data-exporter
    v-modal="dialog"
    :columns="columns"
    #default="{ exportDetails, sortedColumns }"
  >
    <!-- 自定义下载按钮 -->
    <button
      type="button"
      class="btn btn-primary"
      @click="doExport(exportDetails, sortedColumns)"
    >数据导出</button>
  </data-exporter>
</template>

<script>
import { DataExporter } from '@plugins-business/main'

export default {
  components: {
    DataExporter
  },
  data () {
    return {
      dialog: false,
      columns: [
        { key: 'name', name: '姓名' },
        { key: 'sex', name: '性别' }
      ]
    }
  },
  methods: {
    doExport (exportDetails, sortedColumns) {
      // 执行操作
    }
  }
}
</script>

输出的数据结构与 data-export 事件类似，此处不再赘述