vue+spreadjs+后台Java实现与服务端交互的导入导出
由于项目中用到了spreadjs（葡萄城的excel控件），之前做的测试缺少两个主要功能：
- 从 java 服务端导入excel 文件直接在浏览器页面展开不通过先下载再展开的方法（由于先下载再打开会出现多次现在加载等问题）；
- 在网页上加载完之后修改了样式、内容等操作，需要保存到 java 服务端
准备工作：
- 安装葡萄城的spreadjs库；联网的话直接使用：$ npm install @grapecity/spread-sheets-vue 或者直接参考官网地址：
https://demo.grapecity.com.cn/spreadjs/help/docs/UsingSpread.SheetswithVue.html；离线情况下直接把在线状态的
安装包拷贝到离线的PC上修改package.json文件即可 - java后台接口（需要按照文件流的格式传输即可）
开始（直接上代码）：
<template>
<div class="sroot">
<div class="top" id="workbook">
<gc-spread-sheets
@workbookInitialized='initSpread($event)'
:hostClass='"spreadHost"'>
</gc-spread-sheets>
</div>
<div class="foot">
<input type="file" id="loadfile" style="width:100px" @change="loadExcelChange">
<el-button type="primary" @click="importEvent" plain size="mini">导入</el-button>
<el-button type="primary" @click="saveDataToServeEvent" plain size="mini">保存到服务器</el-button>
<el-button type="primary" @click="dataFromServeEvent" plain size="mini">从服务端加载数据</el-button>
</div>
<form name="myform" id="myform" enctype="multipart/form-data" method="post"></form>
</div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-vue';
import '@grapecity/spread-sheets-resources-zh';
import '@grapecity/spread-sheets-charts';
import {IO} from '@grapecity/spread-excelio';
GC.Spread.Common.CultureManager.culture('zh-cn');
import {
upload,
download
} from '@/request/api';
export default{
components:{
},
props:{
},
data(){
return{
importFile:null,
workbook:null,
excelIO:null,
fileName:''
}
},
created(){
},
mounted(){
console.log(`come in mounted!!!`);
this.excelIO=new IO();
},
methods:{
dataFromServeEvent(){
console.log(`come in dataFromServeEvent!!!`);
let str='_[]test 测试.xlsx';
this.fileName=str;
download({name:str}).then(res=>{
console.log(`下载excel!!!`);
let blob = new Blob([res.data], { type: "application/octet-stream" });
let spread=this.workbook;
let io=this.excelIO;
let file=this.importFile;
io.open(blob,
function(json){
let obj=json;
spread.fromJSON(obj);
}
)
}).catch(error=>{
console.log(error);
});
},
loadExcelChange(){
this.importFile=document.getElementById('loadfile').files[0];
},
initSpread(spread){
this.workbook=spread;
},
importEvent(){
console.log(`come in importEvent!!!`);
if(!this.importFile){
alert('请先选择导入的xxx.xlsx文件');
return;
}
let spread=this.workbook;
let io=this.excelIO;
let file=this.importFile;
io.open(file,
function(json){
let obj=json;
spread.fromJSON(obj);
}
)
},
saveDataToServeEvent(){
let spread=this.workbook;
let io=this.excelIO;
let fileStr=this.fileName;
console.log(`come in saveDataToServeEvent!!!`);
var json=spread.toJSON({includeBindingSource:true});
io.save(json,
function(blob){
var fd=new FormData(document.forms.namedItem('myform'));
fd.append('excelFile',blob);
fd.append('excelName',fileStr);
var xhr=new XMLHttpRequest();
xhr.onload=function(e){
console.log('完成');
};
xhr.onerror=function(error){
console.log('上传失败');
console.log(error);
};
xhr.open('POST','/dm02/spreadjsproAction/upload');
xhr.send(fd);
},
function(error){
console.log(error);
})
}
}
}
</script>
<style scoped lang='css'>
.sroot{
display: flex;
flex-direction: column;
width:100%;
height: 100%;
}
.spreadHost{
width: 100%;
height:100%;
}
.top{
width: 100%;
height:90%;
background-color: rgb(140, 236, 164);
}
.foot{
width: 100%;
height: 10%;
background-color: rgb(133, 139, 224);
}
</style>
项目总结：从对项目需求对所做的项目进行一下个人的看法；spreadjs 作为前端项目的excel 插件的话，从上手难度，excel打开速度，展示效果看都是很不错的选择，不过也有
一些局限性：比如不支持导入的excel 中的表格里有斜线，列最大限度为256等问题，相对这些小问题最大问题就是成本问题，包含插件价格+部署价格；对比起来成
本远大于项目组预期成本，于是迫于成本问题直接选择 github 上的开源项目 lucksheet ，当然lucksheet也存在相同的局限问题，并且lucksheet的速度慢（改变不了），
对于大的excel文件有时候会崩溃的问题，需要从源码上进行优化；对于两者来说 spreadjs 相当于各种各样的车，根据你的需求选择不同的车就行了；而lucksheet 却
相当于各种各种车的零件，你需要根据你的需求选好车，然后在根据车来组装各种零件；
