0.1.7 • Published 3 years ago
x-excel-util v0.1.7
Excel 操作
安装
npm i -S x-excel-util使用
import Vue from 'vue'
import xExcelUtil from 'x-excel-util'
Vue.use(xExcelUtil)- Excel 导入(可单个引入)
<x-excel-import :columns="columns" :headerRow="true" @dataHandler="dataHandler">
导入
</x-excel-import>- Excel 导出(可单个引入)
<x-excel-export
:data="data"
:columns="exportColumns"
:headerRow="true"
>
导出
</x-excel-export>配置
- Excel 导入
| 参数 | 类型 | 说明 |
|---|---|---|
| columns | Object Array | 列定义 可选 |
| headerRow | Boolean | 是否包括标题行（读取时候跳过，默认true） |
| sheetId | Number or String | 表索引 默认1 |
- Excel 导出
| 参数 | 类型 | 说明 |
|---|---|---|
| data | Object Array | 数据 |
| filename | String | 保存的文件名称 (默认export.xlsx) |
| creator | String | 创建人（默认system) |
| sheetName | String | 表名称（默认 Sheet 1） |
| columns | Object Array | 列定义 |
| headerRow | Boolean | 是否包括标题行（默认true） |
事件
Excel读取回调函数
dataHandler 包含一个参数，参数为表格数据
指定columns
返回
[{key:value}]形式未指定columns
返回[v1,v2,...]形式
列定义
| 字段 | 类型 | 描述 |
|---|---|---|
| title | String | 列标题 |
| key | String | 对应字段Key |
| width | Number | 宽度，建议取10 |
| value | Function | 可选 数据格式化函数，输入为recordkey |
| parse | Function | 可选 数据解析函数 |
| dataValidation | Object | 列数据验证 |
格式化和解析可用于复杂JSON的输出和读入
数据验证
详情请看 ExcelJS文档
单元格可以定义哪些值有效或无效，并提示用户以帮助指导它们。
验证类型可以是以下之一：
| 类型 | 描述 |
|---|---|
| list | 定义一组离散的有效值。Excel 将在下拉菜单中提供这些内容，以便于输入 |
| whole | 该值必须是整数 |
| decimal | 该值必须是十进制数 |
| textLength | 该值可以是文本，但长度是受控的 |
| custom | 自定义公式控制有效值 |
对于 list 或 custom 以外的其他类型，以下运算符会影响验证：
| 运算符 | 描述 |
|---|---|
| between | 值必须介于公式结果之间 |
| notBetween | 值不能介于公式结果之间 |
| equal | 值必须等于公式结果 |
| notEqual | 值不能等于公式结果 |
| greaterThan | 值必须大于公式结果 |
| lessThan | 值必须小于公式结果 |
| greaterThanOrEqual | 值必须大于或等于公式结果 |
| lessThanOrEqual | 值必须小于或等于公式结果 |
// 指定有效值的列表（One，Two，Three，Four）。
// Excel 将提供一个包含这些值的下拉列表。
dataValidation = {
type: 'list',
allowBlank: true,
formulae: ['"One,Two,Three,Four"']
};
// 指定单元格必须为非5的整数。
// 向用户显示适当的错误消息（如果他们弄错了）
dataValidation = {
type: 'whole',
operator: 'notEqual',
showErrorMessage: true,
formulae: [5],
errorStyle: 'error',
errorTitle: 'Five',
error: 'The value must not be Five'
};
// 指定单元格必须为1.5到7之间的十进制数字。
// 添加“工具提示”以帮助指导用户
dataValidation = {
type: 'decimal',
operator: 'between',
allowBlank: true,
showInputMessage: true,
formulae: [1.5, 7],
promptTitle: 'Decimal',
prompt: 'The value must between 1.5 and 7'
};
// 指定单元格的文本长度必须小于15
dataValidation = {
type: 'textLength',
operator: 'lessThan',
showErrorMessage: true,
allowBlank: true,
formulae: [15]
};
// 指定单元格必须是2016年1月1日之前的日期
dataValidation = {
type: 'date',
operator: 'lessThan',
showErrorMessage: true,
allowBlank: true,
formulae: [new Date(2016,0,1)]
};