使用SpreadJS实现在线 Excel 文档 Demo (Vue+SpringBoot)
本帖最后由 Fiooona 于 2020-3-8 23:48 编辑该示例使用SpreadJS表格控件，实现了在线读取、编辑Excel 文档的功能，下载附件的示例代码，按照Readme文档中的步骤可运行前后端代码。进入后页面：单击文件，右侧会显示文件信息：双击文件夹会进入文件夹：双击文件会进入编辑文件的弹框：可以对文件进行修改、删除操作：技术栈：后端主要采用了：SpringBoot 前端主要采用了：VueElementUI Typescript
快速运行项目: 下载附件代码，前后台详细运行步骤在Readme中有介绍，此处不再赘述。
接下来介绍实现该功能的关键步骤：相关依赖包都写在package.json里，执行命令 npm install 即可安装，主要有： "@grapecity/spread-sheets": "^13.0.5",
"@grapecity/spread-sheets-resources-zh": "^13.0.5",
"@grapecity/spread-sheets-vue": "^13.0.5",
"@grapecity/spread-sheets-pdf": "^13.0.5",
"@grapecity/spread-sheets-print": "^13.0.5",
"@grapecity/spread-sheets-charts": "^13.0.5",
"@grapecity/spread-sheets-shapes": "^13.0.5",在 SpreadJS.vue文件中引入 SpreadJS 相关安装包：
import "@grapecity/spread-sheets-vue";
import * as GC from "@grapecity/spread-sheets";
import"@grapecity/spread-sheets-charts";
import"@grapecity/spread-sheets-shapes";在App.vue文件中引入 SpreadJS 样式文件、中文资源文件：
import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'List.vue文件中是主要的页面逻辑，双击文件时弹出弹框，弹框中引入了自定义的组件：
<MySpreadJS :mySpread="mySpread" :filePath="filePath" @done="childDone" :closeSpread='closeSpread'></MySpreadJS>
mySpread变量中是从后台返回的文件流，传给MySpreadJS 组件，子组件接收到数据后，调用excelIO.open方法打开Excel 文件流， spreadInitHandle: function(spread) {
this.spread = spread;
let self = this;
let excelIO = new ExcelIO.IO();
excelIO.open(
this.spreadblob as Blob,
function(json) {
let workbookObj = json;
self.spread.fromJSON(workbookObj);
},
function(e) {
alert(e.errorMessage);});},可以在线编辑Excel文件，并保存，excelIO.save方法可以将修改后的文件流传给后台，实现文件的修改功能excelIO.save(
curjson,
function(fileblob) {
let formData = new FormData();
formData.append("filePath", self.filePath);
formData.append("type", "update");
formData.append("excelFile", fileblob);
httpUtils.post("/filemanager/savefile", formData).then(response => {
self.$message({
type: "success",
message: "保存成功!"
});
self.$emit("done");
});},
function(e) {
//process error
console.log(e);});后台接口介绍：获取某路径下的文件集合：getfolder
参数 是否必须 说明
path 是 文件夹路径
获取Excel文件内容：getFile
参数 是否必须 说明
filePath 是 文件路径
保存文件：savefile
参数 是否必须 说明
filePath 是 文件路径
type 是 create 创建文件，update 更新文件
excelFile 是 Excel文件流
删除文件：deletefile
参数 是否必须 说明
filePath 是 文件路径
更多详细的实现内容可以下载附件代码，有任何疑问也可以在此帖下回帖。
服务器保存文件的功能，这个没问题，问题在于我在这个excel里插入一个table，保存之后，用office excel软件打开就弹出错误。之前好像视频课程讲到的，是因为没有把table去掉的原因
页:
[1]