vue实现在线Excel表格功能

目录

1.安装x-data-spreadsheet xlsx

2.引入 

3.使用


1.安装x-data-spreadsheet xlsx

npm i x-data-spreadsheet xlsx

2.引入 

import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
import Spreadsheet from "x-data-spreadsheet";
import * as XLSX from "xlsx";
Spreadsheet.locale("zh-cn", zhCN);

3.使用

<template><div class="CptOutbox"><div class="ToolOutbox"><input type="file" @change="chageFile" ref="inputFile" /><button @click="exportExcel">导出xlsx</button><button @click="SaveExcel">批量保存</button></div><div class="ExcelOutbox"><!--web spreadsheet组件--><divclass="sheetContainerbox"ref="sheetContainer"id="x-spreadsheet-demo"></div></div></div>
</template><script>
//引入依赖包
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
import Spreadsheet from "x-data-spreadsheet";
import * as XLSX from "xlsx";
Spreadsheet.locale("zh-cn", zhCN);
export default {name: "XspreadsheetDemo",data() {return {xs: null,};},mounted() {this.init();},methods: {init() {this.xs = new Spreadsheet("#x-spreadsheet-demo", {mode: "edit",showToolbar: true,showGrid: true,showContextmenu: true,showBottomBar: true,view: {height: () => this.$refs.sheetContainer.offsetHeight,width: () => this.$refs.sheetContainer.offsetWidth,},style: {bgcolor: "#ffffff",align: "left",valign: "middle",textwrap: false,strike: false,underline: false,color: "#0a0a0a",font: {name: "Helvetica",size: 10,bold: false,italic: false,},},row: {len: 10000,height: 25,},col: {len: 26,width: 100,indexWidth: 60,minWidth: 60,},});let excelData = localStorage.getItem("WebExcelData");if (excelData) {this.xs.loadData(excelData); // load data}this.xs.change((data) => {localStorage.setItem("WebExcelData", data);});// data validationthis.xs.validate();import('./data.json').then((res) => {console.log(`res`, res);localStorage.setItem("WebExcelData", res.Data);this.xs.loadData(res.Data)})},exportExcel() {var new_wb = this.xtos(this.xs.getData());console.log(`new_wb`, new_wb);XLSX.writeFile(new_wb, "SheetJS.xlsx");},xtos(sdata) {console.log(sdata);var out = XLSX.utils.book_new();sdata.forEach((xws) => {var aoa = [[]];var rowobj = xws.rows;for (var ri = 0; ri < rowobj.len; ++ri) {var row = rowobj[ri];if (!row) continue;aoa[ri] = [];Object.keys(row.cells).forEach((k) => {var idx = +k;if (isNaN(idx)) return;aoa[ri][idx] = row.cells[k].text;});}var ws = XLSX.utils.aoa_to_sheet(aoa);/** 读取在线中的合并单元格,并写入导出的数据中* merges: Array(19)0: "A16:P16"1: "A17:P17"2: "O2:P2"3: "F2:G2"*/ws["!merges"] = [];xws.merges.forEach((merge) => {ws["!merges"].push(XLSX.utils.decode_range(merge));});XLSX.utils.book_append_sheet(out, ws, xws.name);});return out;},chageFile() {this.importExcel(this.$refs.inputFile.files[0]);},importExcel(file) {let reader = new FileReader();reader.onload = (e) => {let data = e.target.result;let fixedData = this.fixData(data);let workbook = XLSX.read(btoa(fixedData), { type: "base64" });console.log(workbook);console.log("this.stox(workbook)",this.stox(workbook));this.xs.loadData(this.stox(workbook));};reader.readAsArrayBuffer(file);// return workbook},fixData(data) {var o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l)o += String.fromCharCode.apply(null,new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;},stox(wb) {console.log(`wb`, wb);var out = [];wb.SheetNames.forEach((name) => {var o = { name: name, rows: {}, merges: [] };var ws = wb.Sheets[name];var aoa = XLSX.utils.sheet_to_json(ws, { raw: false, header: 1 });aoa.forEach((r, i) => {var cells = {};r.forEach((c, j) => {cells[j] = { text: c };});o.rows[i] = { cells: cells };});///console.log(`ws`, ws);// 设置合并单元格if (ws["!merges"]) {ws["!merges"].forEach((merge) => {/** merge = {*  s: {c: 0, r: 15}*  e: {c: 15, r: 15}* }*/// 修改 cell 中 merge [合并行数,合并列数]let cell = o.rows[merge.s.r].cells[merge.s.c];//无内容单元格处理if (!cell) {cell = { text: "" };}cell.merge = [merge.e.r - merge.s.r, merge.e.c - merge.s.c];o.rows[merge.s.r].cells[merge.s.c] = cell;// 修改 mergeso.merges.push(XLSX.utils.encode_range(merge));});}out.push(o);});return out;},///SaveExcel() {},},
};
</script><style lang="scss" scoped>
.CptOutbox {width: 100%;height: 100%;.ToolOutbox {display: flex;flex-flow: row nowrap;align-items: center;width: 100%;height: 50px;}.ExcelOutbox {display: flex;flex-flow: row nowrap;align-items: center;width: 100%;height: calc(100% - 50px);.sheetContainerbox {width: 100%;height: 100%;}}
}
</style>

 

原Excel样式如下

导入到 x-data-spreadsheet 如下图

x-spreadsheet-doc文档

x-spreadsheet在线示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【c++】高精度算法(洛谷刷题2024)乒乓球详解

系列文章目录 第一题 乒乓球 视频&#xff1a;http://【洛谷题单 - 算法 - 高精度】https://www.bilibili.com/video/BV1Ym4y1s7BD?vd_source66a11ab493493f42b08b31246a932bbb 目录 系列文章目录 第一题 乒乓球 前言 一、题目以及引领思考 二、题解与代码 1.输入输出案例 …

C语言实现快速排序算法(附带源代码)

快速排序 在区间中随机挑选一个元素作基准&#xff0c;将小于基准的元素放在基准之前&#xff0c;大于基准的元素放在基准之后&#xff0c;再分别对小数区与大数区进行排序。 动态效果过程演示&#xff1a; 快速排序&#xff08;Quick Sort&#xff09;是一种常用的排序算法&…

WIFI电路原理时序检修思路

uart是串口&#xff0c;bt是蓝牙&#xff0c;hsic是高速接口。pcm是音频接口。时序图的第五步是发出就绪信号&#xff0c;然后第六步与门发出就绪信号。 wifi芯片是u8_rf。 特别说明&#xff1a;short表示短接。xw表示实际是看不到物体的&#xff0c;是直接相连的。 找信号50_…

nginx部署https域名ssl证书

1、在你服务器nginx文件夹下创建ssl文件夹存放证书文件和秘钥文件 把.crt和.key证书放上 2、在nginx.conf文件中配置 在nginx.conf文件中server下加入listen 443 ssl; server {listen 443 ssl;charset utf-8;index index.html index.htm index.jsp index.do;add_heade…

【Midjourney】绘画风格关键词

1.松散素描(Loose Sketch) "Loose sketch"&#xff08;松散素描&#xff09;通常指的是一种艺术或设计中的手绘风格&#xff0c;其特点是线条和形状的表现相对宽松、自由&#xff0c;没有过多的细节和精确度。这样的素描通常用于表达创意、捕捉概念或者作为设计的初步…

docker-compose初探

我一直直接使用docker命令来创建容器&#xff0c;没有怎么用过docker-compose。也不知道docker-compose和docker有什么区别&#xff0c;docker-compose有什么好处。 现在我约略认为&#xff0c;docker-compose是一个简化docker命令的工具&#xff0c;或者说&#xff0c;它是能…

React进阶 - 14(说一说”虚拟DOM“中的”Diff算法“)

本章内容 目录 一、了解 Diff 算法二、key 值的重要性三、为什么不建议使用 index 做 key 值 上一节我们初步了解了 React中的”虚拟 DOM“ &#xff0c;本节我们来说一说”虚拟DOM“中的”Diff算法“ 一、了解 Diff 算法 在上一篇中&#xff0c;我们有讲到&#xff1a;当 st…

【ceph】ceph关于清洗数据scrub的参数分析

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

nicegui 可视化扩展库

nicegui 可视化扩展库 使用代码代码解析教程地址使用代码 from nicegui import ui from niceguiToolkit.layout import inject_layout_tool # import扩展库inject_layout_tool() # 这句是关键with ui.card().classes(

【Unity3D日常开发】Unity3D中UGUI的Text、Dropdown输入特殊符号

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在开发中会遇到需要显示特殊符号的情况&#xff0c;比如上标、…

253.【2023年华为OD机试真题(C卷)】田忌赛马(贪心算法-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-田忌赛马二.解题思路三.题解代码Python题解代码…

防火墙在企业园区出口安全方案中的应用(ENSP实现)

拓扑图 需求&#xff1a; 1、企业出口网关设备必须具备较高的可靠性&#xff0c;为了避免单点故障&#xff0c;要求两台设备形成双机热备状态。当一台设备发生故障时&#xff0c;另一台设备会接替其工作&#xff0c;不会影响业务正常运行。 2、企业从两个ISP租用了两条链路&…

HTML 炫酷进度条

下面是代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>Light Loader - CodePen</title><style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr…

第一篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例:从helloworld开始理解鸿蒙开发ArkTS编程思路

传奇开心果短博文系列 系列短博文目录鸿蒙开发技术点案例示例系列 短博文目录一、前言二、初步解读鸿蒙的helloworld三、进一步深入解读理解 系列短博文目录 鸿蒙开发技术点案例示例系列 短博文目录 一、前言 从掰碎了揉烂了详细注释解读helloworld开始&#xff0c;理解Ark…

【Java网络编程03】网络原理进阶

【Java网络编程03】网络原理进阶 1. UDP协议 1.1 基本介绍 我们首先再来回顾UDP协议的基本特点&#xff1a; 无连接的不可靠传输的面向数据报的全双工的 既然谈到数据报&#xff0c;我们就来看一下UDP数据报的格式&#xff1a; UDP数据报分为报头和载荷部分&#xff0c;其…

hook(post-receive)无法使用

hook&#xff08;post-receive&#xff09;无法使用 为什么无法使用&#xff1f; 只有一个问题&#xff1a;权限不够&#xff0c;你想想&#xff0c;blog.git是一个中转站&#xff0c;咱们要把上传的东西转到blog下面&#xff0c;肯定要有写入操作呀&#xff0c;这个Git仓库的…

Unity——八叉树的原理与实现

八叉树原理 八叉树&#xff08;Octree&#xff09;是一种用于在三维空间中进行空间分割的数据结构。它将三维空间递归地划分为八个子空间&#xff0c;每个子空间对应于一个八叉树节点。这种分割方式可以有效地组织和管理场景中的对象&#xff0c;提高检索效率&#xff0c;特别…

docker镜像的创建

创建镜像有三种方法&#xff0c;分别为基于已有镜像创建、基于本地模板创建以及基于Dockerfile创建。 1&#xff0e;基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;进入容器进行内容修改 先用现有镜像启动容器 docker run 再进入容器进行内容更新…

自然语言NLP学习

2-7 门控循环单元&#xff08;GRU&#xff09;_哔哩哔哩_bilibili GRU LSTM 双向RNN CNN 卷积神经网络 输入层 转化为向量表示 dropout ppl 标量 在物理学和数学中&#xff0c;标量&#xff08;Scalar&#xff09;是一个只有大小、没有方向的量。它只用一个数值就可以完全…

ModuleNotFoundError: No module named ‘half_json‘

问题: ModuleNotFoundError: No module named ‘half_json’ 原因: 缺少jsonfixer包 解决方法: pip install jsonfixerjson修正包地址: https://github.com/half-pie/half-json