vue+spreadjs+后台Java实现与服务端交互的导入导出

由于项目中用到了spreadjs（葡萄城的excel控件），之前做的测试缺少两个主要功能：

1. 从 java 服务端导入excel 文件直接在浏览器页面展开不通过先下载再展开的方法（由于先下载再打开会出现多次现在加载等问题）；
2. 在网页上加载完之后修改了样式、内容等操作，需要保存到 java 服务端

　准备工作：

1. 安装葡萄城的spreadjs库；联网的话直接使用：$ npm install @grapecity/spread-sheets-vue 或者直接参考官网地址：
   https://demo.grapecity.com.cn/spreadjs/help/docs/UsingSpread.SheetswithVue.html；离线情况下直接把在线状态的
   安装包拷贝到离线的PC上修改package.json文件即可
2. 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="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;
    100%;
    height: 100%;
}
.spreadHost{
     100%;
    height:100%;
}
.top{
     100%;
    height:90%;
    background-color: rgb(140, 236, 164);
}
.foot{
     100%;
    height: 10%;
    background-color: rgb(133, 139, 224);
}
</style>

项目总结：从对项目需求对所做的项目进行一下个人的看法；spreadjs 作为前端项目的excel 插件的话，从上手难度，excel打开速度，展示效果看都是很不错的选择，不过也有

　　　　　一些局限性：比如不支持导入的excel 中的表格里有斜线，列最大限度为256等问题，相对这些小问题最大问题就是成本问题，包含插件价格+部署价格；对比起来成

　　　　　本远大于项目组预期成本，于是迫于成本问题直接选择 github 上的开源项目 lucksheet ，当然lucksheet也存在相同的局限问题，并且lucksheet的速度慢（改变不了），

　　　　　对于大的excel文件有时候会崩溃的问题，需要从源码上进行优化；对于两者来说 spreadjs 相当于各种各样的车，根据你的需求选择不同的车就行了；而lucksheet 却

　　　　　相当于各种各种车的零件，你需要根据你的需求选好车，然后在根据车来组装各种零件；