这是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库 具备导入导出，设定单元格值，
- 撤销重做
- 添加行列
- 删除行列
- 隐藏行列
- 动态调整行列功能
- 冻结行列
- 添加边框/颜色/边框线条样式
- 合并单元格
- 复制
- 粘贴
- 打印
- 公式
- 筛选
- 自动填充
- 多表支持
- 字体样式
- 自定义字体/大小/颜色
- 填充前景色/背景色
- 格式校验
- 对齐方式
- 文字换行
vue 开发笔记
<template>
<div>
<div id="drop"></div>
<!-- <a-upload-->
<!-- name="xlfile"-->
<!-- action=""-->
<!-- @change="handleChange"-->
<!-- >-->
<!-- <a-button> <a-icon type="upload" />导入</a-button>-->
<!-- </a-upload>-->
<!-- <input type="file" name="xlfile" id="xlf" />-->
<p><input type="submit" value="导出" id="xport" @click="export_xlsx"></p>
<div id="x-spreadsheet-demo"></div>
</div>
</template>
<script>
import Spreadsheet from 'x-data-spreadsheet'
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn'
import { writeFile, read } from 'xlsx'
import { stox, xtos } from './xlsxspread'
import { findDataAPiExcel, reportcenterJson } from '@/api/api'
export default {
data() {
return {
xspr: '',
options: {
view: {
/* 宽高，因为我是自定义的所以----- */
height: () => document.documentElement.clientHeight,
width: () => document.documentElement.clientWidth
},
formats: [],
fonts: [],
formula: [],
fileName: 'test',
fileBlob: '',
fileArrayBuffer: '',
row: {
len: 100,
height: 25
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60
},
style: {
bgcolor: '#ffff',
align: 'left',
valign: 'middle',
textwrap: false,
textDecoration: 'normal',
strikethrough: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false
}
}
}
}
},
mounted() {
let _this = this
// let xlf = document.getElementById('xlf')
// if (!xlf.addEventListener) return
// xlf.addEventListener('change', _this.handleFile, false)
const options = this.options
Spreadsheet.locale('zh-cn', zhCN)
this.xspr = new Spreadsheet('#x-spreadsheet-demo', options)
},
created() {
findDataAPiExcel({ data_api: this.$route.query.apiId }).then(res => {
let blob = new Blob([res])
this.do_file(blob)
this.fileName = this.$route.query.sheetTitle
})
// reportcenterJson({ apiId: this.$route.query.apiId, isCompare: false }).then(res => {
//
// })
},
methods: {
handleFile(e) {
this.do_file(e.target.files)
},
process_wb(wb) {
let XPORT = document.getElementById('xport')
let data = stox(wb)
data.forEach(i => {
i.styles = [
{
bgcolor: '#e30a0a',
textwrap: true
},
{
color: 'rgba(0,0,0,.5)',
bgcolor: '#f5f5f5',
textwrap: true
}
]
for (let j in i.rows) {
for (let k in i.rows[j].cells) {
if (k == 0) {
i.rows[j].cells[k].style = 0
}
if (k == 1) {
i.rows[j].cells[k].editable = false
i.rows[j].cells[k].style = 1
}
}
}
})
this.xspr.loadData(data).change((cdata) => {
console.log(cdata)
})
// console.log(JSON.stringify(data))
this.xspr.on('cell-selected', (cell, ri, ci) => {
console.log('cell-selected')
console.log('--------------------------------')
console.log('cell', cell)
console.log('ri', ri)
console.log('ci', ci)
console.log('--------------------------------')
this.JsonData = cell
this.ri = ri
this.ci = ci
})
this.xspr.on('cells-selected', (cell, { sri, sci, eri, eci }) => {
console.log('cells-selected')
console.log('--------------------------------')
console.log('cell', cell)
console.log('sri', sri)
console.log('sci', sci)
console.log('eri', eri)
console.log('eci', eci)
console.log('--------------------------------')
})
this.xspr.on('cell-edited', (text, ri, ci) => {
console.log('cell-edited')
console.log('--------------------------------')
console.log('text', text)
console.log('ri', ri)
console.log('ci', ci)
console.log('--------------------------------')
this.JsonData2 = text
this.ri = ri
this.ci = ci
})
XPORT.disabled = false
},
do_file(fileBlob) {
let reader = new FileReader()
let _this = this
reader.readAsArrayBuffer(fileBlob)
reader.onload = function(e) {
if (typeof console !== 'undefined') console.log('onload', new Date())
let data = e.target.result
data = new Uint8Array(data)
_this.process_wb(read(data, { type: 'array' }))
}
},
export_xlsx() {
let new_wb = xtos(this.xspr.getData())
writeFile(new_wb, 'sheetjs.xlsx', {})
}
}
}
</script>
<style>
.x-spreadsheet-icon-img {
background: url("/ico_jiarui.png") no-repeat;
width: 60px;
height: 60px;
}
</style>
