1.安装：
// 方式一：npm安装
npm install jexcel
// 方式二：index.html引入
<script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />
2.vue文件中：
一：创建容器
<div id="spreadsheet"></div>
二：实例化
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
jexcel(document.getElementById('spreadsheet'), {
data:data,
columns: [
{ type: 'text', title:'Car', width:120 },
{ type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
{ type: 'calendar', title:'Available', width:200 },
{ type: 'image', title:'Photo', width:120 },
{ type: 'checkbox', title:'Stock', width:80 },
{ type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
{ type: 'color', width:100, render:'square', }
]
});
3.常用api
1.Option
parseFormulas:true,// 计算功能
wordWrap: true,// 自动换行
rowResize: true,// 行高可改变
tableHeight: 'calc(100% - 160px)',// 表格高度
tableWidth: 'calc(100% - 5px)',// 表格宽度
secureFormulas: true,// 强制转为大写
toolbar:[],// 工具栏
2.option中的toolbar配置
toolbar: [
// 撤销
{
type: 'i',
content: 'undo',
onclick: function (element, instance) {
instance.undo()
},
},
// 前进
{
type: 'i',
content: 'redo',
onclick: function (element, instance) {
instance.redo()
},
},
// 下载(我这是自己封装的导出方法，它是带样式及格式的，详情见我的另一篇文章:https://www.jianshu.com/p/8ea0e59cfd3b)
{
type: 'i',
content: 'cloud_download',
onclick: (element, instance) => {
let fileNames = ''
that.editableTabs.forEach((item) => {
if (item.tableType === that.editableTabsValue) {
fileNames = item.tableValue
}
})
exportReports(fileNames, 'xlsx', jexcel, instance)
},
},
// 字体类型
{
type: 'select',
k: 'font-family',
v: ['Arial', 'Verdana'],
},
// 字体大小
{
type: 'select',
k: 'font-size',
v: [
'9px',
'10px',
'11px',
'12px',
'13px',
'14px',
'15px',
'16px',
'17px',
'18px',
'19px',
'20px',
],
},
// 字体对齐方式
{
type: 'i',
content: 'format_align_left',
k: 'text-align',
v: 'left',
},
{
type: 'i',
content: 'format_align_center',
k: 'text-align',
v: 'center',
},
{
type: 'i',
content: 'format_align_right',
k: 'text-align',
v: 'right',
},
// 合并行列
{
type: 'i',
content: 'tab_unselected',
onclick: function (element, instance) {
let mergeRows = Number(instance.selectedCell[3]) - Number(instance.selectedCell[1]) + 1
let mergeCols = Number(instance.selectedCell[2]) - Number(instance.selectedCell[0]) + 1
instance.setMerge(mergeStart, mergeCols, mergeRows) // 起始单元格名称, 合并列, 合并行
},
},
// 字体粗细
{
type: 'i',
content: 'format_bold',
k: 'font-weight',
v: 'bold',
},
// 字体颜色
{
type: 'i',
content: 'format_color_text',
k: 'color',
onclick: function (element, instance, item) {
if (!item.color) {
let colorPicker = jSuites.color(item, {
onchange: function (o, v) {
cellPicker(o, v, instance, 'color')
},
})
colorPicker.open()
}
},
},
// 单元格背景色
{
type: 'color',
content: 'format_color_fill',
k: 'background-color',
onclick: function (element, instance, item) {
if (!item.color) {
let colorPicker = jSuites.color(item, {
onchange: function (o, v) {
cellPicker(o, v, instance, 'backgroundColor')
},
})
colorPicker.open()
}
},
},
]
2.Spread:jexcel对象(调用api需要用到)
spread = jexcel(dom元素, option)
Option:配置项
例如：let option = {
data: [[]],
minDimensions: item.minDimensions,
allowToolbar: true,
...
}
3.setValue(单元格cell或者cell数组,设置的值)
jexcel.current.setValue(jexcel.current.highlighted, '')
4.getCell([纵坐标，横坐标])
spread.getCell([y, x])
5.insertRow
insertRow：添加新行
@Param mix - 要插入的空行数或带有新行数据的单个数组
@Param integer rowNumber - 引用行号
@param boolean insertBefore - 是否在行前插入
spread.insertRow()
6.insertColumn
insertColumn：添加新列
@param
mix -要添加的列数或要添加到单个列中的数据
@param int columnNumber - 要创建的列数
@param boolean insertBefore
@param object properties - 列属性
spread.insertColumn()
7.insertColumn
setMerge：合并单元格
@Param string columnName - 列名，如A1。
@Param integer colspan - 列数
@Param integer rowspan - 行数
spread.setMerge(key, mergeData[key][0], mergeData[key][1])
8.getData
getData : 获取完整或部分表格数据
// Get the full or partial table data
spreadsheet.getData(Boolean onlyHighlighedCells)
9.getRowData
getRowData：从一行中按数字获取数据
@Param integer rowNumber - 行号
spread.getRowData(x)
10.setWidth
setWidth：更改列宽
@Param integer columnNumber - 从零开始的列号
@Param string newColumnWidth - 新的列宽
spread.setWidth(locY, 110)
11.setHeight
setHeight：更改行高
@Param integer rowNumber - 从零开始的行号
@Param string newRowHeight- 新行高
item.spread.setHeight(locX, Number(String(v.rowHeight).replace('px', '')))
12.getHeight
getHeight：获取当前行高
@Param integer rowNumber - 从零开始的行号
spread.getHeight()[i]
13.getWidth
getWidth：获取当前列宽
@Param integer columnNumber - 从零开始的列号
item.spread.getWidth()[j]
