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

前言

工作中由于需要前端做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:

表格参数配置

表格全局样式

单元格样式

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

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:

参考文章

www.jianshu.com/p/31534691e…

www.cnblogs.com/yinxingen/p…

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

最后

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