# FileExport 文件导出

# FileExport 概述

简单的文件导出。导出xls/xlsx类型文件
说明：需要在自己的工程中安装xlsx插件,同时在自己工程中的main.js中单独引入

此组件只在1.0.19及以上版本有效

插件安装:

cnpm i xlsx --save

工程引入 main.js 中引入:

import XLSX from 'xlsx'
import HFileExport from 'h_ui/dist/lib/FileExport.js'
Vue.component('h-file-export', HFileExport)

目前仅支持 chrome 浏览器使用

# FileExport 使用提示

FileExport 导出组件只支持 50M（30 列 60000 行表格数据）以内的文件导出，超出该限制请使用后台导出方式导出文件

# FileExport 代码示例

# 基本用法

简单的文件导出。支持导出文件类型：xls/xlsx。同时支持传入数据集分表导出至一个文件
当 sheetType 为 table 时，可传入 sheetHeaders 及 sheetTableData 导出数据
其中 sheetHeaders 格式为:[[子表 1header],[子表 2header], ... ],例如:[[{title: '姓名', key: 'name', exportRender: (cell, row) =>{ return '重新渲染过的数据' }},....],[子表2header],...]
其中 sheetTableData 格式为:[[子表 1Data],[子表 2Data], ... ],例如:[[{name: '张三',...}, {name: '李四',...},....],[子表2Data],...]
当 sheetType 为 self 时，可传入 sheetSelfData 导出数据其中 sheetSelfData 格式为:[[[最终显示的表头],[最终显示的数据1],...],[子表2数据]],例如：[ [['列表1','列表2'],['111','aaa']], [['列表1','列表2'],['222','bbb']], []]

# FileExport API

# FileExport props

属性	说明	类型	默认值
fileName	导出文件名	String	test
fileType	导出文件类型，支持 `xls` `xlsx`	String	xls
sheetType	导出子表类型，值可选 `table` (导出表格数据【组件根据 sheetHeaders:及 sheetTableData 生成最终导出数据】,表格默认), `self` (导出自定义数据)	String	table
sheetNames	导出文件子表名称集合,格式:['子表1','子表2',...]	Array	[]
sheetTitleNames	导出文件标题集合,子表第一行显示标题,格式:['子表 title1','子表 title2',...]	Array	[]
sheetHeaders	导出文件的 header 集合，`sheetType` 为 table 时使用，`sheetHeaders` 格式为:[[子表 1header],[子表 2header], ... ]，例如:[[{title: '姓名', key: 'name', exportRender: (cell, row) =>{ return '重新渲染过的数据' }},....],[子表 2header],...]header内部格式与 `table` 组件的 column 类似,需要有 `title` [显示名称],`key` [表格列的 key],`exportRender` [列数据导出渲染函数]	Array	[]
sheetTableData	导出文件的 data 集合，`sheetType` 为 table 时使用，`sheetTableData` 格式为:[[子表 1Data],[子表2Data], ... ]，例如:[[{name: '张三',...}, {name: '李四',...},....],[子表2Data],...]data 内部格式与 `table` 组件的 data 类似	Array	[]
sheetSelfData	导出文件的 data 集合，`sheetType` 为 self 时使用，`sheetSelfData` 格式为:[[[最终显示的表头],[最终显示的数据 1],...],[子表2数据]]	Array	[]
noTipText	无导出数据时的提示文本	String	暂无导出数据
beforeExport	导出前的操作判断是否进行导出, 返回 true 继续导出，返回 false-不进行导出【该属性仅在 1.0.23 及其以上版本使用】	Function	-
beforeSave	调用浏览器保存文件前的判断是否继续, 返回 true 继续保存，返回 false-不进行保存，入参为组装完成的表格文件流【该属性仅在 1.16.0 及其以上版本使用】	Function	-

# FileExport events

事件名	说明	返回值
on-success	文件生成成功后触发（无法根据此事件判断点击了文件选框的保存还是取消）	-

# FileExport slot

名称	说明
-	自定义导出按钮

# FileExport性能

下载文件大小	1M(30列*2000行)	5M(30列*7500行)	10M(30列*15000行)
耗时	697ms	2529ms	4992ms