【Laya + TS + JS】SheetJS(js-xlsx)前端生成Excel表格

已于 2022-08-08 11:46:05 修改
阅读量1.4k 收藏 2
点赞数
分类专栏： 【Unity + Laya】 HTML 文章标签： 前端 javascript typescript Laya
于 2022-08-08 11:45:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seek_yang/article/details/126223215
版权

js-xlsx生成Excel

SheetJS(js-xlsx)介绍

SheetJS 社区版提供了久经考验的开源解决方案，用于从几乎任何复杂的电子表格中提取有用的数据，并生成适用于传统和现代软件的新电子表格。SheetJS是前端操作Excel以及类似的二维表的最佳选择之一，而js-xlsx是它的社区版本。其功能强大，支持xls、xlsx、ods等十几种格式。npm库名称为xlsx，node库也叫node-xlsx，免费版不支持样式调整。

版本选择

纯js即可读取/生成excel，功能强大，支持多种格式，兼容性高。
xlsx.js有core和full两个版本，使用xlsx.core.min.js版本基本上就能满足大部分需求，我在项目中选择了core的版本。
其他详细介绍可以去看官方github：https://github.com/SheetJS/sheetjs。
SheetJS js-xlsx 中文文档：https://github.com/rockboom/SheetJS-docs-zh-CN

兼容性

在这里插入图片描述

SheetJS(js-xlsx)准备

获取xlsx.core.min.js

https://github.com/SheetJS/sheetjs/blob/master/dist/xlsx.core.min.js

通过npm i xlsx 下拉 https://www.npmjs.com/package/xlsx
在这里插入图片描述
xlsx.core.min.js放入bin\libs\min文件夹下，复制改名xlsx.core.js放入bin\libs下，项目设置中勾选添加
在这里插入图片描述

添加xlsx.d.ts声明文件

在这里插入图片描述
index.d.ts复制改名xlsx.d.ts放入libs文件夹下，添加export namespace XLSX{ }，即可通过XLSX.xxx进行调用
在这里插入图片描述

SheetJS(js-xlsx)使用

在这里插入图片描述

JIQIU.YANG
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js-xlsx-demo
08-05
js-xlsx的演示案例，非常的简单。容易操作，直接上手，不明白的可以 加我，打疑。哈哈希望大家多多评论。谢谢了。
【JS处理excel，SheetJS入门笔记】
m0_38036099的博客
11-04 2201
基于文档实现了exce的读取，根据json生成excel，导出；// sheet页 worksheet。// 创建空的工作簿（没有sheet页）// 工作簿 workbook。// 数组 to sheet。// 读取成 json。// 读取成 html。// 添加到 wb 里。
关于 SheetJS 导出Excel 数据和标题显示问题解决
m13012606980的专栏
07-14 2162
关于 SheetJS 导出Excel 数据和标题显示问题解决 GitHub 英文文档：https://github.com/SheetJS/sheetjs GitHub 中文文档：https://github.com/rockboom/SheetJS-docs-zh-CN/blob/master/README.md 1.在浏览器里使用，增加一个script标签： <script lang="javascript" src="dist/xlsx.full.min.js"></script&
exceljs使用文档
最新发布
weixin_59246157的博客
06-15 1787
目录 导入 接口 创建工作簿 设置工作簿属性 工作簿视图 添加工作表 删除工作表 访问工作表 工作表状态 工作表属性 页面设置 页眉和页脚 工作表视图 冻结视图 拆分视图 自动筛选器 列 行
Sheet.JS 使用-html版
benlalagang的博客
11-13 5090
在使用后台管理系统中用到了一些表格、想到将浏览器中的表格(table) 和excel/xlsx格式的文件、JSON数据格式的相互转换也是很常见的功能。 搜索了一下 Sheet.JS是很常用的一个工具
SheetJS/js-xlsx的小demo
nomiiko的博客
06-20 7205
读取json数据时，可以使用items.map(value =>{*}); 其使用效果与items.forEach(object =>{ **})效果相同， 都可以对数组中的元素实现遍历， 如果元素是对象，可以使用key值取对应的元素值如value[key:string] js/sheet xlsx的用法 FileReader:文件解读器 IWorkBook: 工作表对象
SheetJS 中文文档：强大的电子表格处理库的向导
gitblog_00027的博客
03-27 1392
SheetJS 中文文档：强大的电子表格处理库的向导 项目地址:https://gitcode.com/rockboom/SheetJS-docs-zh-CN SheetJS 是一个开源的 JavaScript 库，专为处理 Excel（.xlsx）、CSV、JSON 等各种电子表格数据格式而设计。该项目提供了详细的中文文档，便于中国开发者理解和使用。本文将深入探讨其技术特性，应用场景和优势，以期...
使用SheetJS读写Excel文件
Naisu的各种笔记
12-30 9131
项目中有一个Excel转JSON的工具，之前这个工具一直使用 Python 的 openpyxl 库来编写的，然后使用 pyinstaller 打包成 .exe 文件。之前这个工具只是个命令行工具，不带界面的。现在项目升级，打算使用Web前端方式重写这个工具，调整部分功能并新增图形界面。这篇文章中将使用 SheetJS 来操作Excel文件，对相关操作进行简单记录。
SheetJS中文文档-js导出Excel脚本库
热门推荐
slongzhang的博客
01-08 9万+
转载自 GITHUB用户rockboom 的翻译文档 SheetJs下载： GITHUB地址 | CSDN下载地址 SheetJS js-xlsx SheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健，其跨格式的特点和统一的JS规范兼容，并且ES3/ES5浏览器向后兼容IE6。 目前这个是社区版，我们也提供了性能增强的专业版，专业版提供样式和专业支持的附加功能。
XLSX插件使用 — 导入导出(含中文表头)（React+Antd 对上传表格做数据格式验证）
Cvory
02-10 4702
ReactAntdesignXLSX由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。
Laya+matter 微信小游戏物理颠球
06-11
【Laya+Matter 微信小游戏物理颠球】是一个基于Laya开发的微信小游戏，其核心亮点在于利用了Matter.js作为物理引擎，为游戏提供了真实的物理效果。本项目展示了如何将HTML5技术和微信小游戏平台相结合，创建出具有...
sheetjs js-xlsx
02-16
公司网络限制不能github下载，上传这里中转下，大家可以从官网下载
laya ts 游戏框架 laya版本2.8
02-07
4. **性能优化**：Laya引擎本身对WebGL进行了优化，结合ts的编译优化，可以生成高效的JavaScript代码，确保游戏运行流畅。 5. **社区支持**：TypeScript拥有广泛的开发者社区，提供了大量的库和工具，使得Laya.ts...
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新.pdf
12-16
在使用Laya开发游戏或应用时，遇到的一个常见问题是 TypeScript 编写的代码在编译成JavaScript后，bundle.js 文件没有更新。这个问题可能导致开发者的新添加功能无法正常工作，因为bundle.js中没有反映出这些改动。...
laya2.0+wechat-friend-rank.zip
06-19
《laya2.0结合微信好友排行榜数据技术详解》 在现代的游戏开发中，互动性和社交元素已经成为不可或缺的一部分。Laya2.0作为一款强大的2D/3D游戏引擎，以其高效、易用的特点深受开发者喜爱。而将Laya2.0与微信好友...
Laya 用TypeScript写的代码，编译成JavaScript后bundle.js没更新问题的原因追寻.pdf
12-16
在开发Laya项目时，使用TypeScript作为源代码语言，然后将其编译为JavaScript，有时可能会遇到一个棘手的问题：bundle.js文件没有更新。这个问题在初看之下可能让人困惑，尤其是当你尝试各种方法如新建工程、拷贝...
uniapp和vue如何使用SheetJS导出excel？
liu_chenglong的博客
12-15 1133
uniapp和vue如何使用SheetJS导出excel？ SheetJS中文文档详解。一、SheetJS是什么 SheetJS是一款适用于浏览器和Node.js的开源电子表格解析库。与其他电子表格解析库相比，SheetJS拥有强大的电子表格解析功能，即使电子表格很大，也可以轻松处理。同时，SheetJS支持大量的电子表格格式，如Excel、CSV、OpenDocument等。
exceljs的基本使用
baidu_41927649的博客
01-12 1652
exceljs基本使用
[SheetJS] js-xlsx模块学习指南
weixin_33861800的博客
01-31 1722
简介 SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本. js-xlsx将注意力集中到了数据转换和导出上,所以它支持相当多种类的数据解析和导出.不仅仅局限于支持xlsx格式. 支持的导入格式 支持的导出格式 它可以: 解析符合格式的数据 导出符合格式的数据 利用中间层操作数据 可以运行在...
laya+typescript实现3d迷雾效果，走过的地方迷雾去除
05-15
实现3D迷雾效果的关键是使用Shuriken粒子系统和深度纹理。以下是一些步骤： 1. 创建一个LayaAir3D项目并安装LayaAirIDE。 2. 创建一个3D场景并添加相机。 3. 添加一个平面地形和一个角色模型。 4. 创建一个空节点并将模型和地形添加到该节点下。 5. 创建一个Shuriken粒子系统并将其添加到空节点下。 6. 创建一个深度纹理，并将其添加到相机中。 7. 在代码中，使用Shader3D来控制深度纹理和粒子系统的渲染。 下面是一个简单的示例代码： ```typescript import { Laya } from "Laya"; import { Scene3D } from "laya/d3/core/scene/Scene3D"; import { Camera } from "laya/d3/core/Camera"; import { Vector3 } from "laya/d3/math/Vector3"; import { MeshSprite3D } from "laya/d3/core/MeshSprite3D"; import { Sprite3D } from "laya/d3/core/Sprite3D"; import { ShuriKenParticle3D } from "laya/d3/core/particleShuriKen/ShuriKenParticle3D"; import { Shader3D } from "laya/d3/shader/Shader3D"; import { ShaderDefine } from "laya/d3/shader/ShaderDefine"; import { ShaderData } from "laya/d3/shader/ShaderData"; import { ShaderPass } from "laya/d3/shader/ShaderPass"; import { BaseTexture } from "laya/resource/BaseTexture"; import { RenderTexture } from "laya/resource/RenderTexture"; import { TextureFormat } from "laya/resource/TextureFormat"; export class Fog3D { private _scene: Scene3D; private _camera: Camera; private _depthTexture: RenderTexture; private _depthShader: Shader3D; private _depthPass: ShaderPass; private _fogShader: Shader3D; private _fogPass: ShaderPass; private _depthData: ShaderData; private _fogData: ShaderData; private _fogTexture: BaseTexture; private _particles: ShuriKenParticle3D[]; constructor(scene: Scene3D, camera: Camera) { this._scene = scene; this._camera = camera; // 创建深度纹理 this._depthTexture = new RenderTexture(1024, 1024, TextureFormat.R8G8B8A8, BaseTexture.FORMAT_R8G8B8A8, true); this._camera.depthTextureMode |= Camera.DEPTHTEXTUREDEPTH; // 创建深度渲染Shader this._depthShader = Shader3D.find("DEPTH"); if (!this._depthShader) { this._depthShader = Shader3D.add("DEPTH"); this._depthShader.addSubShaderPass(ShaderPassNames.depth); } this._depthPass = this._depthShader.getSubShaderPass(ShaderPassNames.depth); // 创建迷雾渲染Shader this._fogShader = Shader3D.find("FOG"); if (!this._fogShader) { this._fogShader = Shader3D.add("FOG"); this._fogShader.addSubShaderPass(ShaderPassNames.fog); } this._fogPass = this._fogShader.getSubShaderPass(ShaderPassNames.fog); // 创建ShaderData this._depthData = new ShaderData(); this._fogData = new ShaderData(); // 获取粒子系统 this._particles = []; this._scene.traverse((node: Sprite3D) => { if (node instanceof ShuriKenParticle3D) { this._particles.push(node); } }); } public render() { // 渲染深度纹理 this._depthData.setMatrix4x4(Shader3D.WORLDVIEWPROJECT_MATRIX, this._camera.projectionViewMatrix); this._scene.render(this._depthTexture, this._camera, true, null, false, this._depthPass, this._depthData); // 设置ShaderData this._fogData.setTexture(Fog3D.FogTexture, this._fogTexture); this._fogData.setTexture(Fog3D.DepthTexture, this._depthTexture); this._fogData.setVector3(Fog3D.CameraPosition, this._camera.transform.position); // 渲染粒子系统 for (let i = 0, n = this._particles.length; i < n; i++) { let particle = this._particles[i]; particle.renderer.sharedMaterial.setShaderPass(this._fogPass); particle.renderer.sharedMaterial.setShaderData(this._fogData); } } public dispose() { this._depthTexture.destroy(); this._depthData.destroy(); this._fogData.destroy(); } static FogTexture: number = Shader3D.propertyNameToID("u_FogTexture"); static DepthTexture: number = Shader3D.propertyNameToID("u_DepthTexture"); static CameraPosition: number = Shader3D.propertyNameToID("u_CameraPosition"); } class ShaderPassNames { static depth: string = "DEPTH"; static fog: string = "FOG"; } // 初始化 Laya3D.init(0, 0, true); Laya.stage.scaleMode = Laya.Stage.SCALE_FULL; Laya.stage.screenMode = Laya.Stage.SCREEN_NONE; // 创建场景 let scene = Laya.stage.addChild(new Scene3D()); // 创建相机 let camera = new Camera(0, 0.1, 100); camera.transform.translate(new Vector3(0, 1, -5)); camera.transform.rotate(new Vector3(0, 0, 0), true, false); camera.clearColor = null; scene.addChild(camera); // 创建地形 let terrain = MeshSprite3D.createFromMesh(Laya.PrimitiveMesh.createPlane(100, 100, 100, 100)); terrain.transform.translate(new Vector3(0, 0, 0)); scene.addChild(terrain); // 创建角色 let character = Sprite3D.load("res/character.lh"); character.once(Laya.Event.HIERARCHY_LOADED, null, () => { scene.addChild(character); }); // 创建迷雾 let fog = new Fog3D(scene, camera); fog.FogTexture = Laya.loader.getRes("res/fog.png"); fog.FogTexture.wrapModeU = Laya.BaseTexture.WARPMODE_CLAMP; fog.FogTexture.wrapModeV = Laya.BaseTexture.WARPMODE_CLAMP; fog.FogTexture.filterMode = Laya.BaseTexture.FILTERMODE_BILINEAR; fog.FogTexture.anisoLevel = 16; // 渲染 Laya.timer.frameLoop(1, null, () => { character.transform.translate(new Vector3(0, 0, 0.01)); fog.render(); }); // 加载资源 Laya.loader.create([ { url: "res/character.lh", type: Laya.Loader.HIERARCHY }, { url: "res/fog.png", type: Laya.Loader.TEXTURE2D } ], Laya.Handler.create(null, () => { console.log("资源加载完成！"); })); ``` 在上面的示例代码中，我们使用Shader3D来控制深度纹理和粒子系统的渲染。我们创建了两个Shader：DEPTH和FOG，以及相应的ShaderPass。DEPTH Shader用于渲染深度纹理，FOG Shader用于渲染迷雾效果。我们还使用ShaderData来传递数据到Shader中，例如深度纹理、迷雾纹理和相机位置。最后，我们使用Shuriken粒子系统来实现迷雾效果。 在代码中，我们使用了一个Fog3D类来封装迷雾效果。在构造函数中，我们创建了深度纹理和Shader，并获取了粒子系统。在render()方法中，我们首先渲染深度纹理，然后设置ShaderData，并渲染粒子系统。在dispose()方法中，我们释放了深度纹理和ShaderData。 我们还封装了一些常量，例如FogTexture、DepthTexture和CameraPosition，它们用于传递数据到Shader中。 最后，我们创建了一个场景、相机、地形、角色和迷雾，并将它们渲染到屏幕上。注意，我们需要先加载资源，然后才能创建迷雾。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JIQIU.YANG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值