前言

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

参考文章

https://www.jianshu.com/p/31534691ed53

https://www.cnblogs.com/yinxingen/p/11052184.html

项目地址：https://github.com/pikaz-18/pikaz-excel-js.git

最后

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