欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > SpreadVue实现内置excel在线编辑并保存为后端可以接受的json格式

SpreadVue实现内置excel在线编辑并保存为后端可以接受的json格式

2025/3/9 23:26:34 来源:https://blog.csdn.net/trabecula_hj/article/details/146095963  浏览:    关键词:SpreadVue实现内置excel在线编辑并保存为后端可以接受的json格式

SpreadVue实现内置excel在线编辑并保存为后端可以接受的json格式

  • 一、定义excel模板
    • 1.1 用speadVue默认例子,直接在线编辑模板,并绑定工作表
    • 1.2 下载模板excel文件,补充行的公式,并锁定公式不允许编辑
  • 二、实际使用
    • 2.1 初始化刚才保存的excel模板文件
    • 2.2 在录入数据后保存数据

项目背景:需要在线录入部分数据,其他行数据由特定公式计算,且公式不可编辑,用于存在很多行公式,通过前端JS计算非常不方便,且公式一改js要变动的很多,所以这时候推荐使用SpreadVue内置excel

一、定义excel模板

1.1 用speadVue默认例子,直接在线编辑模板,并绑定工作表

在这里插入图片描述

1.2 下载模板excel文件,补充行的公式,并锁定公式不允许编辑

在这里插入图片描述

二、实际使用

2.1 初始化刚才保存的excel模板文件

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);//这里url是文件请求地址
xhr.responseType = 'blob';
xhr.onload = function (e) {if (this.status == 200) {var blob = this.response;var fd = new FormData();fd.append("file", [blob]);var fd = new File([blob],  "文件名.xlsx");Spread.import(fd, function () {}, function () { }, openOptions);}
};
xhr.send();

2.2 在录入数据后保存数据

var Spread = designer.getWorkbook();var sheetid = 0;var sheet = Spread.getSheet(sheetid);var table = sheet.tables.all()[0]var range = table.range();var mm = sheet.getArray(range.row, range.col, 1, range.colCount)[0];//列字段fieldvar gg = sheet.getArray(range.row + 1, range.col, range.rowCount, range.colCount);//行数据var datalist = new Array();var object = {};for (var j = 0; j < gg.length; j++) {var object = new Object();for (var n = 0; n < mm.length; n++) {object[mm[n]] = gg[j][n];}datalist.push(object);}// console.log(datalist,'datalist')//最终传递给服务器的数据

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词