当前位置: 首页 > news >正文

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];//列字段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')//最终传递给服务器的数据

相关文章:

  • Centos操作系统大全(附ISO镜像下载)
  • 电商项目-秒杀系统(五) 秒杀下单接口限流
  • 使用Modelsim手动仿真
  • 题目 3217 ⭐成绩统计⭐【滑动窗口 + 二分搜索】蓝桥杯2024年第十五届省赛
  • 大白话 CSS 中transform属性的常见变换类型(平移、旋转、缩放等)及使用场景
  • 管理 SELinux 安全性
  • 正则表达式详解
  • android13打基础: timepicker控件
  • Vue 3 ref(new Map()) 无法触发watch
  • 力扣35.搜索插入位置-二分查找
  • Linux网络配置(超详细)
  • 「Java EE开发指南」如何用MyEclipse构建一个Web项目?(二)
  • Go权限管理库Casbin和身份验证库jwt-go初试
  • 【2025】Electron + React 架构筑基——从零到一的跨平台开发
  • 电子学会—2024年12月青少年软件编程(图形化)四级等级考试真题——趣味点阵屏
  • 当中国“智算心跳”与全球共振:九章云极DataCanvas首秀MWC 2025
  • 快速掌握EasyOCR应用实战指南
  • Qt常用控件之表格QTableWidget
  • openharmony 软总线-设备发现流程
  • OSPF网络类型:NBMA与P2MP
  • 24 手表网站/百度搜索收录入口
  • 北京著名网站建设公司/昆明装饰企业网络推广
  • 最低成本做企业网站 白之家/google play商店
  • 怎么 给自己的网站做优化呢/广州百度网站快速排名
  • 广州开发网站建设/营销推广网站推广方案
  • 佛山做网站公司有哪些/seo常见优化技术