SpreadJS + Vue + Axios 实现服务端加载sjs、ssjson、xlsx

收藏

本帖最后由 Ellia.Duan 于 2023-3-6 16:57 编辑

在这篇文章中提到了如何SpreadJS + Vue + Axios 实现服务端加载、上传Excel 。

在此基础上，本文聊一聊如何SpreadJS + Vue + Axios 实现服务端加载、上传sjs、ssjson以及xlsx文件。
关于SJS，可以查看这篇文章，https://gcdn.grapecity.com.cn/showtopic-156384-1-1.html。
以及相关学习指南：https://en.onboarding.grapecityd ... mat/overview/purejs
在前端页面上，添加一个sjs文件，然后通过以下代码进行加载。

spread.open(file, function () {
// success callback to do something
}, function (e) {
console.log(e); // error callback
});

复制代码

通过以下代码进行导出

spread.save(function (blob) {
// save blob to a file
saveAs(blob, fileName);
}, function (e) {
console.log(e);
});

复制代码

同时，在v16版本中，对于导入导出ssjson与xlsx文件，有一个新的api接口：spread.import，spread.export

spread.import(file, function () {
// success callback to do something
}, function (e) {
console.log(e); // error callback
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
spread.export(function (blob) {
// save blob to a file
saveAs(blob, fileName);
}, function (e) {
console.log(e);
}, {
fileType: GC.Spread.Sheets.FileType.excel,
includeBindingSource: true
});

复制代码

以上两种导入接口，第一个参数均为file文件，如果此时不想要前端去上传文件，想从后端获取文件流，然后进行加载，这时候怎么办呢？
本示例用axios获取接口数据，

axios({
method: "post",
url: "spread/importFile",
data: fd,
responseType: "blob",
headers: {
cache: false,
"Access-Control-Allow-Origin": "*",
'X-Requested-With': 'XMLHttpRequest',
crossDomain: true
}
}).then(
response => {},err=>{console.log(err)
});

复制代码

sjs:

var blob = new Blob([response.data], {type:'application/zip'});
console.time('渲染时间')
this.spread.open(blob,
function () {
console.timeEnd('渲染时间')
},
function (e) {
console.log(e)
},
{openMode:GC.Spread.Sheets.OpenMode.incremental}
);

复制代码

ssjson:

var blob = new Blob([response.data], {type:'text/plain;charset=utf-8'});
tempFileType = GC.Spread.Sheets.FileType.ssjson;
options = {
incrementalLoad: {
loading: function (progress, args) {
let sheetName = args.sheet.name();
console.log(progress, sheetName);
},
loaded: function () {
console.timeEnd('渲染时间')
}
},
fileType: tempFileType
},
}
console.time('渲染时间')
spread.import(blob, function () {}, function (e) {
console.log(e); // error callback
}, options);

复制代码

xlsx:

var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
options = {
openMode:GC.Spread.Sheets.OpenMode.incremental,
fileType: GC.Spread.Sheets.FileType.excel,
progress: (progressArgs) => {
console.log(progressArgs)
},
}
console.time('渲染时间')
spread.import(blob, function () {
console.timeEnd('渲染时间')
}, function (e) {
console.log(e); // error callback
}, options);

复制代码

其前端代码与后端代码见附件。
关于如何使用，见如下动图：

		自动登录	找回密码
密码			立即注册

SpreadJS + Vue + Axios 实现服务端加载sjs、ssjson、xlsx

0 个回复

SpreadJS 认证

SpreadJS 高级认证