首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    搞定 XLSX 预览?别瞎找了,这几个库(尤其最后一个)真香!

    file=README.md 第一个选手:老牌劲旅 xlsx 提起处理 Excel,xlsx 这库估计是绕不过去的。GitHub 上 35k 的 star,简直是元老级别的存在了。 安装?...特别是读取和修改样式,这对于需要“还原”Excel 样貌的场景太重要了! 免费开源! 这点太香了,没有商业使用的后顾之忧。 文档清晰: 官方文档写得挺明白,示例也足。...需要在线编辑、强交互: 如果你做的不是预览,而是个在线的类 Excel 编辑器,那砸钱上 Handsontable 可能是最接近目标的(如果预算允许的话)。...说真的,没有银弹。选哪个,最终还是看你的具体需求和项目限制。 但如果非要我推荐一个,我绝对站 ExcelJS。 在功能、易用性和成本(免费!)之间,它平衡得太好了。...对于大部分需要精细处理 Excel 文件(尤其是带样式预览)的场景,它就是那个最香的选择! 好了,就叨叨这么多,希望能帮到你!赶紧去试试吧!

    60200

    使用electron+vue开发一个跨平台todolist(便签)桌面应用

    # 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服。...之前我一直简单的以为electron只是张网页加个壳,和那些号称跨平台的运行在手机上的webapp是一个套路。...直到我真的需要开发一个跨平台桌面应用的时候,我又认真的尝试了一下electron,我开始意识到:这才是我理想中的跨平台桌面应用开发的最终形态,它简直太优秀了。...中数据导出为excel文件 等等.........[x] 开机启动 [x] 鼠标穿透 [ ] 窗口贴边自动收起 [ ] ...... # 4 在使用electron期间确实也遇到很多坑,其中大部分都是来自于electron编译nodejs模块。

    2K10

    后台生成 xlsx 文件

    02 — js-xlsx 对于处理 Excel 来说 js-xlsx 大概是 star 数最多的一个库了,废话不多说,直接上代码。...我们先创建简单的测试数据: 然后建立一个简单的 http 服务器生成 xlsx 文件并作为响应返回给用户: 重点看下红色标记处即可,相应操作非常简单,并且我已经做了注释说明,用户只要请求这个地址就会自动下载该...对于 js-xlsx 这个库,我不得不说的是虽然文档写了很多,但其实效果并不怎么样,我也并不怎么喜欢这个库。...03 — exceljs 相比于上面的 js-xlsx ,我更喜欢也推荐大家使用 exceljs 这个库。...测试数据: 后台操作: 同样重点关注红色圈中的内容,你可以看到我能够很方便的设置行或列的宽高、及其是否隐藏等属性,并且操作数据也很自然,最后显示的效果: 除此之外,exceljs 对于某行、某列、某个具体的单元格都可以很灵活的设置其样式

    2.1K30

    前端提效 - js 批量导出 excel 为zip压缩包

    本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。...downloadFiles2Zip:将多个 excel 文件导出到一个 zip 压缩包内,没有嵌套文件夹。...构造的数据原来的 id 是 0-4,页面上显示的应该是 20-24,如下图: 这时导出的 excel 应该跟页面上显示的一模一样,这样才是正确的。...点击【导出zip】按钮,解压后打开下载的其中一个 excel,验证显示的内容跟在线表格完全一致。 那么是如何做到的呢?...多级目录是通过文件名 folderName实现的。 folderName为空字符串,则将它的 files放入压缩包的顶级目录中,不在任何子文件内。

    3.7K20

    前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)

    :js 批量导出 excel 为zip压缩包, 对导出方法进行了封装,还实现了使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个...中,header 字段表示显示的表头内容,key 是用于匹配数据的 key,width 是列宽。...下载 excel saveWorkbook()也是自己封装的方法,接收 workbook 和文件名来下载 excel 到本地。 下载是使用 file-saver库。...: 上一节简单表格中我们用 worksheet.columns = generateHeaders(columns)设置每一个表头列所要显示的信息和应该匹配的 key,但是它无法设置多级表头,所以需要换一种思路...一个 sheet 中放多张表 在导出多级表头表格的时候,我们写表头和数据行都是用的worksheet.addRow方法,而没有用 worksheet.column设置表格的表头,这样更加灵活,每一列想显示什么内容完全自己控制

    12.8K20

    【Node】大数据导出

    } // 提交工作表 My Sheet sheet.commit(); // 数据写入完成,交工作簿 workbook.commit() 然后就会在 xlsx 目录下 看到一个 excel 文件 上面我们创建文件流的的时候...,指定了一个文件路径,是因为得有同一个写入数据的端 当我们在作为接口响应的时候,就没必要指定文件了 因为 HTTP 响应对象(也就是上面代码中的 res)是一个可写流 我们通过exceljs 可以直接拿到.../exceljs/exceljs/blob/master/README_zh.md 数据分批处理 在我们实际的运行情况中,发现虽然用了文件流,但是下载大文件时内存依旧会爆炸,因为一次性处理 几十万甚至上百万的数据...异步任务 在 async v3.2.1 中,优先使用了 queueMicrotask ctx.body 赋值同样也是一个异步任务,但是使用的是 Promise 然而 queueMicrotask 执行比...Promise 快,导致 还没有把 文件流 连接 响应流时 exceljs 添加的异步任务就开始执行了,然后触发了内部的一些判断条件,文件流就中断了 而 async 3.2.0 之前使用的是 setImmediate

    2.3K20

    前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览

    前言 因为业务需要,很多文件需要在前端实现预览,今天就是了解一下吧。 实现方案 找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用。...页的数据 创建一个dom元素,设置元素的画布属性 通过page.render方法,将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf...page.render(renderContext); }) }) 复制代码 实现效果 excel实现前端预览 代码实现 下载exceljs、handsontable的库 通过exceljs...属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览 // 加载excel的数据 (new ExcelJS.Workbook().xlsx.load(buffer)).then(workbook...主要是通过jszip库,加载blob文件流,再经过一些列处理处理转换实现预览效果 实现效果 总结 主要介绍了word、excel、pdf文件实现预览的方式,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题

    2.6K51

    分享一些 word、excel、pdf、ppt、图片、文本等文件的预览工具

    Demo地址[1] 实现方案 前端开发博客 找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用。...1页的数据 创建一个dom元素,设置元素的画布属性 通过page.render方法,将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf...代码实现 下载exceljs、handsontable的库 通过exceljs读取到文件的数据 通过workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据...引入@handsontable/vue的组件HotTable 通过settings属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览 // 加载excel的数据 (new ExcelJS.Workbook...实现效果 image.png 总结 主要介绍了word、excel、pdf文件实现预览的方式,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,所以一般好的方案就是后端配合将不同格式的文件转换成

    2.5K30

    Node.js 动态表格大文件下载实践

    流式下载 简单下载在碰到大文件的情景就不够用了,因为 Node 无法将大文件一次性读取到进程内存里。...进度显示 当下载的文件特别大时,上个例子 Content-Length 正确设置时浏览器下载条里就能正常显示进度了,为了方便我们使用程序模拟一下: router.get('/download/progress...动态表格 在了解完上述关于文件下载实现的基础后,我们来看一个实际问题:根据请求参数条件读取数据库的某张表的全部记录并导出为表格。...${x.f_user_id}`) } }) 流处理 在上面的 xlsx.js 文件中,是先输出一个文件再使用 fs.createReadStream 流输出 exceljs 库提供了 API 来实现流写...总结 文件导出是最常见的需求之一,把功能实现好是专业素质最好的体现。 此文篇幅有限,原理性的细节如 Exceljs 的依赖里对 xlsx 规范的 zip 流处理等等大家可以自行去了解一番。

    6.8K30

    使用 Node.js + Vue 实现 Excel 导出与保存的功能

    我们的项目是前端用vue,服务端用node.js,这个excel导出我们已经用了一年,我们目前用到的无非是图片导出,文本导出,调调excel单元格距离等....这个node端的封装是经过同事不断的review(感谢同事),俺不断的修改优化后的代码,当时也是我第一次接触node.js,只想告诉你,用它,稳稳的!...node.js服务端代码 1.拿到需要导出的数据之后如何使用(假数据模拟,下面是页面) image.png constructor(prop) { super(prop) // 定义excel头部数据...,打印如下 baseExcelInfo用来定义基本的参数 data 表示的是excel的数据来源 filename 是文件名(但是前端的excel导出会进行覆盖) header表示的是表格的头部 sheetName...表示的是excel的表名 imageKeys:图片的信息:字段名称,图片的宽高,但是只要有图片,name必须设 image.png 很重要的一点就是,假设从表里面的数据返回的status是1,那么我肯定导出的不能

    1.4K40

    Node.js + Vue 实现 Excel 导出与保存

    这个node端的封装是经过同事不断的review(感谢同事),俺不断的修改优化后的代码,当时也是我第一次接触node.js,只想告诉你,用它,稳稳的!...node.js服务端代码 1.拿到需要导出的数据之后如何使用(假数据模拟,下面是页面) ?...,打印如下 baseExcelInfo用来定义基本的参数 data 表示的是excel的数据来源 filename 是文件名(但是前端的excel导出会进行覆盖) header表示的是表格的头部 sheetName...image.png 很重要的一点就是,假设从表里面的数据返回的status是1,那么我肯定导出的不能1,应该是对应的一个中文,所以在导出前,应该进行处理,这个处理应该是在服务端来做,而不是前端做一遍,然后为了导出这个功能重新做一遍举个例子...// 引入exceljs const Excel = require('exceljs') // 导出文件相关服务 class exportFileService extends Service {

    3.9K20

    Node.js + Vue 实现 Excel 导出与保存

    我们的项目是前端用vue,服务端用node.js,这个excel导出我们已经用了一年,我们目前用到的无非是图片导出,文本导出,调调excel单元格距离等....这个node端的封装是经过同事不断的review(感谢同事),俺不断的修改优化后的代码,当时也是我第一次接触node.js,只想告诉你,用它,稳稳的!...,打印如下 baseExcelInfo用来定义基本的参数 data 表示的是excel的数据来源 filename 是文件名(但是前端的excel导出会进行覆盖) header表示的是表格的头部 sheetName...表示的是excel的表名 imageKeys:图片的信息:字段名称,图片的宽高,但是只要有图片,name必须设 image.png 很重要的一点就是,假设从表里面的数据返回的status是1,那么我肯定导出的不能...// 引入exceljs const Excel = require('exceljs') // 导出文件相关服务 class exportFileService extends Service {

    2.7K00

    JavaScript导出excel文件,并修改文件样式

    说明 因为最近需要实现前端导出 excel 文件,并且对导出文件的样式进行一些修改,比如颜色、字体、合并单元格等,所以我找到了 xlsx-style 这个项目,它可以对导出的 excel 文件进行一些样式上的修改...其实 SheetJS 也是支持修改导出文件的样式的,不过是在它的专业版中, SheetJS 分为社区版和专业版的,社区版是开源的,但是却不支持修改导出文件的样式,专业版拥有更多的功能,这其中就包括修改样式...例如: //单元格输入1时显示男,输入0时显示女 worksheet["A1"].s.numFmt = '[=1]"男";[=0]"女"'; 在 Excel 中对应的操作就是,右键单元格,选择设置单元格格式...) 如果使用 write 方法需要设置 type 属性,而且如果设置 type 属性为 file,还需要在 wopts 参数中增加一个 file 属性,值是要创建文件的路径。...文中 Excel 相关的截图,均是在 Microsoft Excel 2016 版截取的,不同版本的 Excel 显示可能稍有不同。

    6.1K30

    excel 树结构json_excel转换json的强大工具

    大家好,又见面了,我是你们的朋友全栈君。 让excel支持表达复杂的json格式,将xlsx文件转成json。 使用说明 目前只支持.xlsx格式,不支持.xls格式。...本项目是基于nodejs的,所以需要先安装nodejs环境。...还支持命令行传参导入导出特定excel,具体使用 node index.js –help 查看。 json名字以excel的sheet名字命名。...对象属性使用分号;分割。 原理说明 依赖 node-xlsx 这个项目解析xlsx文件。 xlsx就是个zip文件,解压出来都是xml。有一个xml存的string,有相应个xml存的sheet。...补充 实验环境:win7_x64 + nodejs_v0.10.25(可在linux上执行) 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131586.html原文链接

    1.2K30

    处理Excel文件最简单、最精致的JS库

    大家好,我是前端实验室的大师兄! 在 web 开发中,管理后台生成 excel 报表并且下载,一个很常用的功能,很多 Javascript 开发者也提供了很多的这方面的工具来实现这一功能。...今天大师兄给大家分享一个小众的Excel文件解析器和生成器:node-xlsx 之前小师妹推荐过ExcelJS。这算是Excel处理的第二趴了。...前言 对于Javascript处理 Excel 文件来说,js-xlsx 库是目前 Github 上 star 数量最多的库了,功能非常强大,强大到入门时瑟瑟发抖。文档有些乱,不适合快速上手。...`); 我们假设myFile文件中只有一张表,且表的数据是这样的(这可能是实话...哈哈)。...这样导出也OK啦~ node-xlsx 在构建工作表的时候,可以进行行列配置。具体使用可以参考下面链接。

    4.6K30

    nodejs实现导出excel报表

    2019-03-15 16:34:19 生成报表并下载是作为web应用的一个传统功能,在nodejs中,很多开发人员也提供了很多的依赖来实现这一功能。...js-xlsx : 目前 Github 上 star 数量最多的处理 Excel 的库,支持解析多种格式表格XLSX / XLSM / XLSB / XLS /CSV,解析采用纯js实现,写入需要依赖nodejs.../Node-Excel-Export node-xlrd : 基于node.js从excel文件中提取数据,仅支持xls格式文件,不支持xlsx,有点过时,常用的都是XLSX 格式。...这里我们主要介绍一下excel-export的应用。 安装 npm install excel-export 使用 nodejs使用的框架是express,koa框架也类似。..."; conf.name = "mysheet";//这里标识在excel底部的表名 conf.cols = [{ caption:'字符串', type

    6.3K10
    领券