由于項目中用到了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"  @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 卻

　　　　　相當于各種各種車的零件，你需要根據你的需求選好車，然后在根據車來組裝各種零件；

總結

以上是生活随笔為你收集整理的vue+spreadjs+后台Java实现与服务端交互的导入导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。