vue3-excel-parser
v1.0.5
Published
vue3的excel解析器,支持excel解析与导出
Downloads
12
Readme
vue3-excel-parser
包简答说明
这是一个 vue3 的关于 excel 解析的包,支持导入 excel 并且自定义字段名,也支持将对象数组导出为 excel,导出也支持自定义字段
字段说明
对于ExcelExporter:
data:任意类型的对象数组,需要长度大于0,作为excel的内容,必选
fileName:字符串类型,文件名,后缀为excel后缀名,不然会产生显示异常,必选
workSheet:字符串类型,工作卡的名字,可选,默认值:'Sheet 1'
fields:对象,指定导出excel的表头名,对象的key需要与导出data的每一个对象的key保持一致,或者为子集,可选,默认值为对象的key
exportFields:字符串数组,指定导出哪些字段,每一个字符串必须是对象的key,可选,默认导出所有字段
对于ExcelImporter:
data:任意类型的对象数组,用来作为导入内容存放的容器,必须为响应式对象,使用v-model:data = 'data'传入,必选
fields:对象,指定导入对象数组中每一个对象的key,fields的key需要与excel表头字段对应,或者为子集,可选,默认值为excel表头字段
importFields:字符串数组,指定导入哪些字段,每一个字符串必须是excel的表头,可选,默认导入所有字段
使用例子
<template>
<div>
<ExcelImporter
v-model:data="excelData"
:fields="{
姓名: 'name',
年龄: 'age',
性别: 'sex',
手机号码: 'tele',
}"
:importFields="['name','age']">
<button>点击导入</button>
</ExcelImporter>
<ExcelExporter
:data="excelData"
file-name='test.xlsx'
:fields="{
name: '姓名',
age: '年龄',
sex: '性别',
tele: '手机号码',
}"
:exportFields="['name','age']">
<button>点击导出</button>
</ExcelExporter>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { ExcelImporter, ExcelExporter } from 'vue3-excel-parser';
const excelData = reactive<any[]>([]);
</script>
注意事项
- 自定义字段 fields 的 key 必须与 excel 中的表头一一对应,如 excel 的表头是姓名、年龄,那么 fields 应该这么书写,否则会抛出错误
//'name'便是姓名的自定义字段
{
姓名:'name',
年龄:'age'
}
- 使用导入器的时候必须导入 excel 文件,否则会抛出错误
- 导出文件名后缀必须是 excel 文件后缀