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

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

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

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

一、定义excel模板

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

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

二、实际使用

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

java 复制代码
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 在录入数据后保存数据

java 复制代码
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];//列字段field
 var 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')//最终传递给服务器的数据
相关推荐
UrbanJazzerati16 分钟前
Excel 函数 `SUBSTITUTE` 用法详解:替换文本中的字符
excel
何中应2 小时前
EasyExcel使用(二:写出)
java·后端·maven·excel
m0_462185112 小时前
VB解除excel保护工作表
excel
qq_463944862 小时前
如何把Excel文件导入Navicat?
数据库·excel
不太厉害的程序员2 小时前
Excel 将数据导入到SQLServer数据库
数据库·sqlserver·excel
开开心心_Every2 小时前
多线程语音识别工具
javascript·人工智能·ocr·excel·语音识别·symfony
Code季风4 小时前
数据传输的基石:全面解析常见序列化方案与选型策略
java·rpc·json
Goona_19 小时前
拒绝SQL恐惧:用Python+pyqt打造任意Excel数据库查询系统
数据库·python·sql·excel·pyqt
忘忧记19 小时前
excel删除重复项场景
excel
UrbanJazzerati21 小时前
Excel 神器 COUNTIFS 函数详解:多条件计数实战
excel