介绍
在工作中并没有找到一个开箱即用的excel导入导出插件,js里比较知名的xlsx插件免费版没办法修改样式,而xlsx-style插件需要修改源码,都比较麻烦,所以进行了一番查找…
功能
支持导出excel文件,并可设置列宽,边框,字体,字体颜色,字号,对齐方式,背景色等样式。 支持excel文件导入,生成json数据,考虑到客户端机器性能,导入大量数据时,推荐拆分数据分成多个文件导入。
安装
npm或yarn安装
yarn add pikaz-excel-js
npm i -S pikaz-excel-js
导出的使用
<excel-export
bookType="xlsx"
:sheet="sheet"
ref="excelExport"
>
<div>导出</div>
</excel-export>
import { ExcelExport } from 'pikaz-excel-js'
export default {
components: {
ExcelExport
},
data() {
return {
sheet: [
{
title:"水果的味道",
tHeader:["荔枝","柠檬"],
table:[{litchi:"甜",lemon:"酸"}],
keys:["litchi","lemon"],
sheetName:"水果的味道",
}
]
}
}
}
属性说明
参数 说明 类型 可选值 默认值 bookType 文件格式 string xlsx/xls xlsx filename 文件名称 string – excel sheet 表格数据,每个表格数据对象配置具体看下方表格配置 array – – before-start 处理数据之前的钩子,参数为导出的文件格式,文件名,表格数据,若返回 false则停止导出 function(bookType, filename, sheet) – – before-export 导出文件之前的钩子,参数为导出的文件格式,文件名,blob文件流,若返回 false则停止导出 function(bookType, filename, sheet) – – on-error 导出失败的钩子,参数为错误信息 function(err) – –
表格参数配置
参数 说明 类型 可选值 默认值 title 表格标题,必须搭配表头或多级表头使用,非必须项 string – – tHeader 表头,非必须项 array – – multiHeader 多级表头,即一个数组中包含多个表头数组,非必须项 array – – table 表格数据 array – – merges 合并单元格,合并的表头和表格多余数据项以空字符串填充,非必须项 array – – keys 数据键名,需与表头内容顺序对应 array – – colWidth 列宽,若不传,则列宽自适应,数据量多时推荐设置列宽(自动列宽时数据类型必须为string,如有其他数据类型,请手动设置列宽),数据量多时推荐设置列宽) array – – sheetName 表格名称 string – sheet globalStyle 表格全局样式,具体参数查看下方表格全局样式 object – 表格全局样式 cellStyle 单元格样式,每个单元格对象配置具体参数查看下方单元格样式 array – –
表格全局样式
参数 属性名 说明 类型 可选值 默认值 border top 格式如:{style:'thin',color:{ rgb: "000000" }} object style:thin/medium/dotted/dashed {style:'thin',color:{ rgb: "000000" }} right 格式如:{style:'thin',color:{ rgb: "000000" }} object style:thin/medium/dotted/dashed {style:'thin',color:{ rgb: "000000" }} bottom 格式如:{style:'thin',color:{ rgb: "000000" }} object style:thin/medium/dotted/dashed {style:'thin',color:{ rgb: "000000" }} left 格式如:{style:'thin',color:{ rgb: "000000" }} object style:thin/medium/dotted/dashed {style:'thin',color:{ rgb: "000000" }} font name 字体 string 宋体/黑体/Tahoma等 宋体 sz 字号 number -- 12 color 字体颜色,格式如:{ rgb: "000000" } object -- { rgb: "000000" } bold 是否为粗体 boolean true/false false italic 是否为斜体 boolean true/false false underline 是否有下划线 boolean true/false false shadow 是否有阴影 boolean true/false false fill fgColor 背景色 { rgb: "ffffff" } -- { rgb: "ffffff" } alignment horizontal 水平对齐方式 string bottom/center/top center vertical 垂直对齐方式 string bottom/center/top center wrapText 文字是否换行 boolean true/false false
单元格样式
参数 说明 类型 可选值 默认值 cell 单元格名称,如A1 string -- --
导入的使用
<excel-import :on-success="onSuccess">
<div>导入</div>
</excel-import>
import {ExcelImport} from 'pikaz-excel-js'
export default {
components: {
ExcelImport,
},
methods:{
onSuccess(data, file){
console.log(data)
}
}
}
属性说明
参数 说明 类型 可选值 默认值 sheetNames 需要导入表的表名,如['插件信息'] Array -- -- removeBlankspace 是否移除数据中字符串的空格 Boolean true/false false removeSpecialchar 是否移除不同版本及环境下excel数据中出现的特殊不可见字符,如u202D等,使用此功能,返回的数据将被转化为字符串 Boolean true/false true before-import 文件导入前的钩子,参数file为导入文件 function(file) -- -- on-progress 文件导入时的钩子 function(event,file) -- -- on-change 文件状态改变时的钩子,导入文件、导入成功和导入失败时都会被调用 function(file) -- -- on-success 文件导入成功的钩子,参数response为生成的json数据 function(response, file) -- -- on-error 文件导入失败的钩子,参数error为错误信息 function(error, file) -- --