Vue implements online editing excel
Does not support ie support edge If you need ie, please change the method
I won't repeat it again
Install x-data-spreadsheet
npm install x-data-spreadsheet
<template>
<div ></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: {
/*Width and height, because I am custom, so -----*/
/*height: () => - 300,
width: () => - 300,*/
height: () => - 64,
width: () => - 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,
},
},
},
/*array*/
optionss:[{
name:'aaaa',
/*freeze: 'C3',*/
styles: [
{
/*Small frame background color*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*Small frame background color*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*Merge cells*/
merges: [
'C3:E4',
],
rows: {
/*Line 1*/
1: {
cells: {
/*Column 0 2 column*/
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: [
{
/*Small frame background color*/
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
},{
/*Small frame background color*/
bgcolor: '#000000',
textwrap: true,
color: '#000000',
border: {
top: ['thin', '#000000'],
bottom: ['thin', '#000000'],
right: ['thin', '#000000'],
left: ['thin', '#000000'],
},
},
],
/*Merge cells*/
merges: [
'C3:E4',
],
rows: {
/*Line 1*/
1: {
cells: {
/*Column 0 2 column*/
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(){
/*Chinese*/
('zh-cn', zhCN);
new Spreadsheet('#x-spreadsheet-demo', ).loadData().change((data) => {
(data)
});
}
}
</script>
<style>
</style>Vue Export Excel Template
1. First, you need to import the third-party plug-in xlsx (it is best to specify the version, otherwise it will be easy to report an error)
npm install --save [email protected]
Import and export may also be used in the future, and third-party plug-ins are also required.
npm install --save [email protected]
2. Import the page where you need to download the excel template
import XLSX from "xlsx"
3. Bind events to the download template button
<el-button @click="downloadExcel">Hi Hi Hi Hi</el-button>
4. Download the template to execute content
downloadExcel() {
let excelData = [
[ 'Name', 'Telephone', 'Birthday', 'xx', "xx", "……"]//This is the header data ]
let ws = .aoa_to_sheet(excelData)
let wb = .book_new()
.book_append_sheet(wb, ws, 'Workbook name')
(wb, 'Save file name.xlsx')
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.