离线填报下数据源和模板的导出方案

收藏

背景

我们通过数据绑定实现的填报都是需要先绑定一个空的数据源，然后填报结束后通过getDataSource()方法获取到这个数据源，并传给后端进行持久化。我们在后端的存储也往往是数据源和空模板进行分开存储的。但会偶尔有小伙伴有这种离线填报的需求，我无法跟后端建立连接，但是我需要提前将大量的数据填写好，等待可以传输给后端时再给后端传输数据。这期间就会有，导出填报内容，再导入的情景，在第二次导入后，如果我们的逻辑是绑定一个空数据源，那么用户填报的数据就丢失了，如果不填报数据源，那么就无法将用户填报的数据拿出来传给后端进行持久化，这种情况下应该怎么做呢？这里我们可以借助导出的json这个自由的结构体来实现。

实现方式

1. 导入文件

var reader = new FileReader();
let jsonFile = _getElementById("jsonFile").files[0];
reader.addEventListener("loadend", function (e) {
var json = JSON.parse(reader.result);
spread.fromJSON(json);
let data = json.mydatasource || {};
let sheet = spread.getActiveSheet()
let len = sheet.tables.all().length;
for (let i = 0; i < len; i++) {
let bp = sheet.tables.all()[i].bindingPath();
if (!(bp in data)) {
data[bp] = [{}];
}
}
let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(source);
})
reader.readAsText(jsonFile);

复制代码

2. 导出文件

// 处理数据源
let json = spread.toJSON()
let sheet = spread.getActiveSheet()
let mydatasource = {}
if (sheet.getDataSource()) {
mydatasource = sheet.getDataSource().getSource();
}
let outputspread = new GC.Spread.Sheets.Workbook();
json.mydatasource = mydatasource;
// 将字符串转换为Blob对象
let blob = new Blob([JSON.stringify(json)], { type: 'application/json' });
// 创建一个指向该Blob的URL
let fileUrl = URL.createObjectURL(blob);
// 创建一个临时的a标签用于触发下载
let downloadLink = document.createElement('a');
downloadLink.href = fileUrl;
downloadLink.download = _getElementById("exportFileName").value; // 指定下载文件名
// 将a标签插入到文档中并模拟点击进行下载
document.body.appendChild(downloadLink);
downloadLink.click();
// 清理临时的URL和下载链接
document.body.removeChild(downloadLink);
URL.revokeObjectURL(fileUrl);

复制代码

实现效果

完整代码

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

离线填报下数据源和模板的导出方案

0 个回复

SpreadJS 认证

SpreadJS 高级认证