一个vue的excel导入导出插件,支持修改样式

13,773 阅读4分钟

前言

工作中由于需要前端做excel的导入导出,在网上并没有找到一个开箱即用的excel导入导出插件,js里比较知名的xlsx插件免费版没办法修改样式,能修改样式的专业版要七百多刀,默默找其他插件了,后来找到了xlsx-style插件却需要修改源码,都比较麻烦,所以在网上查找了许多大佬们的代码后,在xlsx和xlsx-style基础上对其做了简单的封装(非常感谢大佬们无私奉献的代码),中英文及数字混杂时根据字符长度设置了自动列宽,个人感觉这个是最有用的了,嘻嘻。

功能

  • 支持导出excel文件,并可设置列宽,边框,字体,字体颜色,字号,对齐方式,背景色等样式。
  • 支持excel文件导入,生成json数据,考虑到客户端机器性能,导出大量数据时,推荐拆分数据分成多个文件导出。

demo

Installation

With npm or yarn

yarn add pikaz-excel-js

npm i -S pikaz-excel-js

请确保vue版本在2.0以上

For Vue-cli

Export:

Typical use:

<excel-export :sheet="sheet">
   <div>导出</div>
</excel-export>

.vue file:

  import {ExcelExport} from 'pikaz-excel-js'
  ...
  export default {
        components: {
            ExcelExport,
        },
        data () {
          return {
            sheet:[
              [
                title:"水果的味道",
                tHeader:["荔枝","柠檬"],
                table:[{litchi:"甜",lemon:"酸"}],
                keys:["litchi","lemon"],
                sheetName:"水果的味道",
              ]
            ]
          }
        }
  ...

Attributes:

参数 说明 类型 可选值 默认值
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 列宽,若不传,则列宽自适应,数据量多时推荐设置列宽 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 -- --

其他属性与表格全局样式设置方式一致

Import:

Typical use:

<excel-import :on-success="onSuccess">
   <div>导入</div>
</excel-import>

.vue file:

  import {ExcelImport} from 'pikaz-excel-js'
  ...
  export default {
        components: {
            ExcelImport,
        },
        methods:{
          onSuccess(data, file){
            console.log(data)
          }
        }
  ...

Attributes:

参数 说明 类型 可选值 默认值
sheetNames 需要查询的表名,如['插件信息'] Array -- --
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) -- --

参考文章

www.jianshu.com/p/31534691e…

www.cnblogs.com/yinxingen/p…

项目地址:github.com/pikaz-18/pi…

最后

自己写了文档后才发现,文档是真的难写,以后再也不吐槽别人的文档了,哈哈。