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" type="text/css" />
<link rel="stylesheet" type="text/css" />
2.vue文件中：
一：創(chuàng)建容器
<div id="spreadsheet"></div>
二：實(shí)例化
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,// 計(jì)算功能
wordWrap: true,// 自動換行
rowResize: true,// 行高可改變
tableHeight: 'calc(100% - 160px)',// 表格高度
tableWidth: 'calc(100% - 5px)',// 表格寬度
secureFormulas: true,// 強(qiáng)制轉(zhuǎn)為大寫
toolbar:[],// 工具欄
2.option中的toolbar配置
toolbar: [
// 撤銷
{
type: 'i',
content: 'undo',
onclick: function (element, instance) {
instance.undo()
},
},
// 前進(jìn)
{
type: 'i',
content: 'redo',
onclick: function (element, instance) {
instance.redo()
},
},
// 下載(我這是自己封裝的導(dǎo)出方法，它是帶樣式及格式的现喳，詳情見我的另一篇文章:http://www.reibang.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) // 起始單元格名稱, 合并列, 合并行
},
},
// 字體粗細(xì)
{
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對象(調(diào)用api需要用到)
spread = jexcel(dom元素, option)
Option:配置項(xiàng)
例如：let option = {
data: [[]],
minDimensions: item.minDimensions,
allowToolbar: true,
...
}
3.setValue(單元格cell或者cell數(shù)組,設(shè)置的值)
jexcel.current.setValue(jexcel.current.highlighted, '')
4.getCell([縱坐標(biāo)，橫坐標(biāo)])
spread.getCell([y, x])
5.insertRow
insertRow：添加新行
@Param mix - 要插入的空行數(shù)或帶有新行數(shù)據(jù)的單個(gè)數(shù)組
@Param integer rowNumber - 引用行號
@param boolean insertBefore - 是否在行前插入
spread.insertRow()
6.insertColumn
insertColumn：添加新列
@param
mix -要添加的列數(shù)或要添加到單個(gè)列中的數(shù)據(jù)
@param int columnNumber - 要?jiǎng)?chuàng)建的列數(shù)
@param boolean insertBefore
@param object properties - 列屬性
spread.insertColumn()
7.insertColumn
setMerge：合并單元格
@Param string columnName - 列名憔涉，如A1奶是。
@Param integer colspan - 列數(shù)
@Param integer rowspan - 行數(shù)
spread.setMerge(key, mergeData[key][0], mergeData[key][1])
8.getData
getData : 獲取完整或部分表格數(shù)據(jù)
// Get the full or partial table data
spreadsheet.getData(Boolean onlyHighlighedCells)
9.getRowData
getRowData：從一行中按數(shù)字獲取數(shù)據(jù)
@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：獲取當(dāng)前行高
@Param integer rowNumber - 從零開始的行號
spread.getHeight()[i]
13.getWidth
getWidth：獲取當(dāng)前列寬
@Param integer columnNumber - 從零開始的列號
item.spread.getWidth()[j]
