vue如何实现在线编辑excel
作者：不会么么哒
这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue实现在线编辑excel
不支持ie 支持edge 需要ie请换方法
vue不再赘述
安装x-data-spreadsheet
npm install x-data-spreadsheet
<template>
<div id="x-spreadsheet-demo"></div>
</template>
<script>
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
export default {
data() {
return {
options:{
mode: 'edit',
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
/*宽高，因为我是自定义的所以-----*/
/*height: () => document.documentElement.clientHeight - 300,
width: () => document.documentElement.clientWidth - 300,*/
height: () => document.documentElement.clientHeight - 64,
width: () => document.documentElement.clientWidth - 150,
},
formats: [],
fonts: [],
formula: [],
row: {
len: 100,
height: 25,
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
/*freeze: 'C3',*/
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
textDecoration: 'normal',
strikethrough: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false,
},
},
},
/*数组*/
optionss:[{
name:'aaaa',
/*freeze: 'C3',*/
styles: [
{
/*小框背景色*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*小框背景色*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*合并单元格*/
merges: [
'C3:E4',
],
rows: {
/*第1行*/
1: {
cells: {
/*第0列 2列*/
0: { text: 'testingtesttestetst' },
2: { text: 'testing' },
},
},
2: {
cells: {
0: { text: 'render', style: 0 },
1: { text: 'Hello' },
2: { text: 'haha', merge: [1, 2] },
}
},
8: {
cells: {
8: { text: 'border test', style: 0 },
}
}
},
},{
name:'aaaa',
/*freeze: 'C3',*/
styles: [
{
/*小框背景色*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*小框背景色*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*合并单元格*/
merges: [
'C3:E4',
],
rows: {
/*第1行*/
1: {
cells: {
/*第0列 2列*/
0: { text: 'testingtesttestetst' },
2: { text: 'testing' },
},
},
2: {
cells: {
0: { text: 'render', style: 0 },
1: { text: 'Hello' },
2: { text: 'haha', merge: [1, 2] },
}
},
8: {
cells: {
8: { text: 'border test', style: 0 },
}
}
},
}]
}
},
methods: {
},
mounted:function(){
/*中文*/
Spreadsheet.locale('zh-cn', zhCN);
new Spreadsheet('#x-spreadsheet-demo', this.options).loadData(this.optionss).change((data) => {
console.log(data)
});
}
}
</script>
<style>
</style>vue导出excel模板
1、首先需要导入第三方插件xlsx（最好是指定版本，要不然容易报错）
npm install --save xlsx@0.17.0
后续可能还会用到导入导出，也需要安装第三方插件
npm install --save file-saver@2.0.5
2、哪个页面需要下载excel模板就到哪里导入
import XLSX from "xlsx"
3、给下载模板按钮绑定事件
<el-button @click="downloadExcel">嗨嗨嗨</el-button>
4、下载模板执行内容
downloadExcel() {
let excelData = [
[ '姓名', '电话', '生日', 'xx', "xx", "……"]//这里是表头数据
]
let ws = XLSX.utils.aoa_to_sheet(excelData)
let wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, '工作簿名称')
XLSX.writeFile(wb, '保存的文件名.xlsx')
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。