x-excel-util

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	[可选] 数据格式化函数，输入为record[key]
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)]
};