使用js实现excel的读取展示以及导出

代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.css"><script src="https://unpkg.com/x-data-spreadsheet@1.1.5/dist/xspreadsheet.js"></script><!-- use version 0.20.2 --><script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script><script src="https://cdn.sheetjs.com/xspreadsheet/xlsxspread.js"></script>
</head>
<body><div id="xspreadsheet"></div><button id="exportBtn">导出</button><script>(async() => {const url = "https://docs.sheetjs.com/PortfolioSummary.xls";const workbook = XLSX.read(await (await fetch(url)).arrayBuffer());const data = stox(workbook);//导入数据const s = x_spreadsheet("#xspreadsheet");s.loadData(data) // load data//x_spreadsheet('#xspreadsheet');document.querySelector("#exportBtn").addEventListener("click",function(){//导出数据const workbook2 = xtos(s.getData())XLSX.writeFile(workbook2, "export.xlsx", { compression: true });})})();</script>
</body>
</html>

原始数据
在这里插入图片描述
展示数据
在这里插入图片描述
导出的数据
在这里插入图片描述

参考

https://git.sheetjs.com/sheetjs/sheetjs
https://docs.sheetjs.com/docs/
https://hondrytravis.com/x-spreadsheet-doc/
https://github.com/myliang/x-spreadsheet
https://github.com/wolf-table/table

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

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

相关文章

现身说法,AI小白的大模型学习过程

导读 写这篇文章的初衷&#xff1a;作为一个AI小白&#xff0c;把我自己学习大模型的学习路径还原出来&#xff0c;包括理解的逻辑、看到的比较好的学习材料&#xff0c;通过一篇文章给串起来&#xff0c;对大模型建立起一个相对体系化的认知&#xff0c;才能够在扑面而来的大…

idea 突然 Cannot resolve symbol ‘xxx‘

解决一&#xff1a;关闭 idea&#xff0c;在文件夹中找到代码所在位置&#xff0c;删除 .idea 文件夹重新打开项目就可以了 解决二&#xff1a;检查 jdk 版本 解决三&#xff1a;保存重要文件&#xff0c;重新下载项目代码

接口防篡改+防重放攻击

接口防止重放攻击&#xff1a;重放攻击是指攻击者截获了一次有效请求(如交易请求),并在之后的时间里多次发送相同的请求&#xff0c;从而达到欺骗系统的目的。为了防止重放攻击&#xff0c;通常需要在系统中引入一种机制&#xff0c;使得每个请求都有一个唯一的标识符(如时间戳…

深度学习训练基于Pod和RDMA

目录 ​编辑 引言 RDMA技术概述 InfiniBand iWARP RoCE Pod和容器化环境 深度学习训练与RDMA结合 MPI和RDMA 深度学习框架与RDMA 实战&#xff1a;基于Pod和RDMA的深度学习训练 环境准备 步骤 YAML 性能和优势 结论 引言 随着深度学习在人工智能领域的快速发展…

使用Tauri+vite+koa2+mysql开发了一款待办效率应用

&#x1f389;使用Taurivitekoa2mysql开发了一款待办效率应用 &#x1f4dd;项目概述 这是一个基于taurivite的应用&#xff0c;它采用了一些最新的前端技术&#xff0c;包括 Tauri、Vue3、Vite5、koa2 和 mysql。它提供了丰富的效率管理工具。 应用地址&#xff1a;https:/…

Openldap安装部署及Gitea简单配置使用

Openldap安装部署及Gitea简单配置使用 一.安装Openldap #拉取镜像 docker pull osixia/openldap:latestdocker run \ -d \ -p 389:389 \ -p 636:636 \ -v /home/data/openldap/local:/usr/local/ldap \ -v /home/data/openldap/lib:/var/lib/ldap \ -v /home/data/openldap/s…

OceanBase 列存中多列过滤性能解析

今天有同事问我&#xff0c;列存大宽表场景下&#xff0c;如果在多个列上有等值过滤条件&#xff0c;OceanBase 的性能是不是无法满足要求&#xff1f; Hi 晓楚&#xff0c;帮评估个OTS替换场景 大概1亿大宽表&#xff0c;查询姿势就是任意字段的组合&#xff0c;进行等值查询g…

海外青云私有云:企业的数字化转型得力助手

在全球化日益加深的今天&#xff0c;海外企业对于云计算的需求也愈发迫切。青云(QingCloud)作为一家领先的云计算服务提供商&#xff0c;其私有云产品在海外市场上受到了广泛的关注和认可。那么&#xff0c;海外青云私有云究竟有何用处呢?本文将从多个角度为您科普。 首先&…

Java高级重点知识点-10-Object类

文章目录 Object类(java.lang) Object类(java.lang) Object类是Java语言中的根类&#xff0c;即所有类的父类 重点&#xff1a; public String toString()&#xff1a;返回该对象的字符串表示。 public class User {private String username;private String password;public…

地雷数量求解(二维数组)

问题描述 为了保证边境重要的军事基地不会被敌人入侵&#xff0c;我军在敌军的必经之路上埋了 &#x1d465; 颗地雷&#xff0c;已知这片必经之地是 &#x1d45b;&#x1d45a; 的方阵形状&#xff0c;为了让我们的友军知道哪些地方是有地雷的&#xff0c;我军工兵绘制了一张…

LeetCode刷题之HOT100之乘积最大子数组

2024/6/25 六月也来到了末尾&#xff0c;刷题也刷了一个半月左右。收获还是有的&#xff0c;最起码打字快了哈哈&#xff0c;做题啦&#xff01; 1、题目描述 2、逻辑分析 一眼动态规划。 解题思路 遍历数组时计算当前最大值&#xff0c;不断更新令nowMax 为当前最大值&…

java的线程

定义&#xff1a;在java中&#xff0c;线程是程序中一个独立的执行流&#xff0c;它拥有自己的核心运行逻辑和状态。在操作系统中&#xff0c;线程是进程的一部分&#xff0c;是程序执行的最小单元。 重要性&#xff1a;多线程使得程序能够更好的利用CPU资源&#xff0c;同时处…

AI大模型企业应用实战:Prompt让LLM理解知识

1 Prompt Prompt 可理解为指导AI模型生成特定类型、主题或格式内容的文本。 NLP中&#xff0c;Prompt 通常由一个问题或任务描述组成&#xff0c;如“给我写一篇有关RAG的文章”&#xff0c;这句话就是Prompt。 Prompt赋予LLM小样本甚至零样本学习的能力&#xff1a; LLM能力…

Linux驱动开发(三)--新字符设备驱动开发 LED驱动开发升级

1、新字符设备驱动原理 使用 register_chrdev 函数注册字符设备的时候只需要给定一个主设备号即可&#xff0c;但是这样会 带来两个问题 需要我们事先确定好哪些主设备号没有使用 会将一个主设备号下的所有次设备号都使用掉&#xff0c;比如现在设置 LED 这个主设备号为200&…

从50分到90分,网站性能优化实践

难以置信: 我可是用尊贵的Vue3Ts开发的呢 (手动狗头). 十分抗拒: 迫于yin威,我给网站做了体检和手术. 体检 – 市面上的体检套餐有很多种,但其实都是换汤不换药.那药(标准)是什么呢?我们会在下面说明.这里我选择了谷歌亲儿子"灯塔"(LightHouse)进行性能体检. 体检…

Scala入门:打造大数据处理的超能力(通俗易懂)

Scala是一门现代的多范式编程语言&#xff0c;它融合了面向对象和函数式编程的特点&#xff0c;被广泛应用于大数据处理领域。本文将详细介绍Scala的基本概念、使用方法、主要作用以及注意事项。 一、Scala简介 1. Scala的起源 Scala由Martin Odersky于2004年创建&#xff0c…

解决 vue 项目一直出现 sockjs-node/info?t=问题

其实如果是在开发环境&#xff0c;应该是开发的时候网络环境变更导致&#xff0c;比如你切换无线网络&#xff0c;导致开发服务器的IP地址换了&#xff0c;这样开发服务器会不知道如何确定访问源。开发环境中关闭npm dev server&#xff0c;然后重新npm run serve重新构建服务环…

探索AI世界系列:俗说AI智能体

AI agent&#xff0c;翻译为中文就是AI智能体。 什么是AI智能体呢&#xff1f; 一&#xff0c;GPT对AI智能体的定义 AI智能体&#xff0c;即人工智能体&#xff08;Artificial Intelligence Agent&#xff09;&#xff0c;是具有自主性、学习能力和推理能力的计算机程序。 …

聚观早报 | 小鹏MONA M03曝光;iPhone 16系列电池改进

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 6月25日消息 小鹏MONA M03曝光 iPhone 16系列电池改进 一加Ace 3 Pro三款配色 字节跳动与博通合作开发AI芯片 蚂…

【性能优化】Android冷启动优化

文章目录 常见现象APP的启动流程计算启动时间Displayed Timeadb dump 启动优化具体策略总结参考链接 常见现象 各种第三方工具初始化和大量业务逻辑初始化&#xff0c;影响启动时间&#xff0c;导致应用启动延迟、卡顿等现象 APP的启动流程 加载和启动应用程序&#xff1b; …