首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏快乐阿超

    handsontable

    ——佚名 分享一个表格组件 https://github.com/handsontable/handsontable 非常有意思

    44330编辑于 2023-07-21
  • 来自专栏hbbliyong

    Handsontable Dropdown with key-value pair

    在使用handsontable的时候,本身的下拉列表无法满足业务需求,需要使用key-value类型的dropdown. 但是使用过程中需要注意两点 1.此插件是基于chosen.jquery.js的一个jquery插件,所以使用的过程中记得引入chosen.jquery.js 与jquery.js 2.由于handsontable 的版本跟新,有些api不能使用了 customDropdownRenderer 方法中的 Handsontable.TextCell.renderer需要改成Handsontable.renderers.TextRenderer

    2K30发布于 2018-06-01
  • 来自专栏萝卜大杂烩

    强大的类excel插件,handsontable的简单应用

    handsontable是一款强大的web端类excel插件,对于需要在网页上编辑类excel数据的同学来说,简直是妙不可言!” /p/0ad18fdd7eed 另外相关的官方文档请参考: handsontable 官网:https://handsontable.com/ GitHub :https://github.com/handsontable /handsontable js-XLSX github:https://github.com/SheetJS/js-xlsx 01.简介 先来看看效果,最终大致就是这样 ? 02.JS代码 首先需要初始化handsontable,查看官方文档可以看到,定义一个handsontable的对象,第一个参数是获取到的html元素,第二个参数是handsontable的初始数据和一些设置 Ajax发送数据 为handsontable编写event事件,当“save”按钮被点击时,触发函数,调用savetotest接口,提交数据。 ? 4. 测试 前台填写数据 ?

    8.4K60发布于 2019-07-17
  • 来自专栏萝卜大杂烩

    Vue + Flask 小知识(二)

    Vue + Flask 小知识(一)传送门 Handsontable Handsontable 是一个网页版的类 excel 工具,其强大的地方已经不言而喻了。 安装 npm install handsontable @handsontable/vue 基本使用 <template>   <hot-table :data="data" rowHeaders="true /node_modules/<em>handsontable</em>/dist/<em>handsontable</em>.full.css"></style> 这样,就把 Handsontable 与 Vue 框架结合到一起了。 script 脚本 <script>   import { HotTable } from '@handsontable/vue'     import Handsontable from 'handsontable /node_modules/handsontable/dist/handsontable.full.css"></style> 下面我们来逐步看下 首先说下 utl.js 文件,其实是在网上找的佚名大神的代码

    2.5K21发布于 2019-07-17
  • 来自专栏移动端周边技术扩展

    Vue实现复制excel表格内容粘贴至网页

    使用Handsontable表格组建 引入与使用 cnpm install handsontable @handsontable/vue //main.js中 import 'handsontable/ dist/handsontable.full.css'; // vue页面 import { HotTable } from '@handsontable/vue'; import Handsontable from 'handsontable'; 主体实现代码 <template>

    <el-form :inline="true"> "> </hot-table>
    </template> <script> import { HotTable } from '@handsontable /vue'; import Handsontable from 'handsontable'; import { getCountDays, getCurrentMonthDayList

    3.5K10发布于 2020-07-24
  • 来自专栏沉浸式趣谈

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

    第二个选手:重量级嘉宾 Handsontable 聊完基础款,我们来看个重量级的:Handsontable。这家伙最大的卖点,就是直接给你一个长得、用起来都跟 Excel 贼像的在线表格! 安装要多装个 Vue 的适配包: npm install handsontable npm install @handsontable/vue3 # Vue3 专用包 别忘了还有 CSS: import 'handsontable/dist/handsontable.full.css'; 基础用法,它是在一个 DOM 容器里初始化: <template> <div id="excel-preview '; import '<em>handsontable</em>/dist/<em>handsontable</em>.full.css'; onMounted(() => { // 初始化表格 const container /vue3'; import { registerAllModules } from '<em>handsontable</em>/registry'; import '<em>handsontable</em>/dist/<em>handsontable</em>.full.css

    1.3K00编辑于 2025-04-18
  • 20.6K star!Excel级交互体验!这款开源Web表格神器绝了!

    嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。 = document.getElementById('example');const data = [[1, "Tesla", 3], [2, "BMW", 5]];const hot = new Handsontable 万行流畅100万行内置功能50+原生功能30+核心功能基础表格功能框架支持全框架支持全框架支持无学习曲线中等较高简单社区生态1500+问答企业级支持开源社区 项目传送门# 快速安装npm install handsontable @handsontable/react# 或通过CDN引入<script src="https://cdn.jsdelivr.net/npm/<em>handsontable</em>/dist/<em>handsontable</em>.full.min.js /<em>handsontable</em>

    46100编辑于 2025-03-17
  • 来自专栏JVMGC

    19K Star大公司都在用的开源电子表格组件

    组件介绍 Handsontable是一个功能强大的JavaScript组件,提供类似于Excel电子表格的用户体验。它非常适合中后台管理系统等多种业务场景的使用,尽管不支持商业用途。 Handsontable可以与主流框架如React、Angular和Vue等一起使用,并支持数据绑定、数据验证、排序、增删改查以及上下文菜单等功能。 功能描述 Handsontable提供了很多常用功能, 如下 多列排序:允许用户按照多列进行排序,方便浏览和分析数据。 非连续选择:支持用户选择非连续的单元格,提高操作灵活性。 Handsontable为开发者提供了一个功能丰富、易用灵活的数据网格组件,为各种业务需求提供了便捷的解决方案。 开源地址:https://github.com/handsontable/handsontable

    97211编辑于 2024-04-19
  • 来自专栏趣谈前端

    四款开源电子表格组件,轻松集成到你的项目

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}); github地址:https://github.com/dream-num/univer 4. handsontable handsontable 是一款完全开源的在线电子表格组件,他提供了详细的文档和丰富的API接口来保证我们能实现专业级电子表格: 它同时支持多种前端框架,比如vue2, vue3, react等,非常适合有技术余力的团队经行二次开发 一个简单的使用案例: import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable /registry'; import 'handsontable/dist/handsontable.full.min.css'; registerAllModules(); // generate github地址:https://github.com/handsontable/handsontable 最后 我目前已经把其中一款电子表格集成到了Next-Admin (基于nextjs的开源中后台系统

    6.4K10编辑于 2024-06-05
  • 来自专栏前端笔记薄

    chatGpt即将取代你——chatGpt做技术调研

    HandsontableHandsontable是一个基于JavaScript的电子表格库,可用于创建可定制的电子表格应用程序。它具有强大的数据绑定、筛选、排序、搜索等功能,并且易于扩展。 ', 'handsontable/handsontable', 7295, 'Advanced', 'Intermediate', 'Active', 'Yes', 'Yes'], ['SheetJS 在线电子表格框架 Handsontable Handsontable 是一个功能丰富的在线电子表格框架,它提供了许多强大的功能,如排序、筛选、分组、格式化等。 此外,Handsontable 还提供了许多插件和扩展,如自动填充、公式计算、图表等。 GitHub 地址:https://github.com/handsontable/handsontable SheetJS SheetJS 是一个快速、灵活的 JavaScript 电子表格库,可以读取

    3.6K50编辑于 2023-03-17
  • 来自专栏前端公虾米

    Vue友最爱的10个开箱即用的开源项目 | 建议收藏

    预览的每一个效果都可以复制源码开箱即用 网址:https://uigradients.com/ GitHub:https://github.com/ghosh/uiGradients GitHub Stars:★4523 Handsontable Handsontable是用于Web应用程序的JavaScript数据网格组件。 网站: https://handsontable.com GitHub: https://github.com/handsontable/handsontable GitHub Stars: ★12857

    6K20编辑于 2021-12-23
  • 来自专栏前端达人

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

    替代开源组件 word(docx) mammoth docx-preview(npm) powerpoint(pptx) pptxjs pptxjs改造开发 excel(xlsx) sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf(pdf) pdfjs pdfjs(npm) 图片 jquery.verySimpleImageViewer v-viewer renderContext); }) }) 实现效果 image.png 还可以看看:Webview加载pdf遇到的一些坑及解决方法 excel实现前端预览 代码实现 下载exceljs、handsontable 的库 通过exceljs读取到文件的数据 通过workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据 引入@handsontable/vue的组件HotTable 获取每一行的数据 const data = ws.getRows(1, ws.actualRowCount); }) // 渲染页面 import { HotTable } from "@handsontable

    2.8K30编辑于 2022-04-18
  • 来自专栏thinkphp+vue

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

    替代开源组件 word(docx) mammoth docx-preview(npm) powerpoint(pptx) pptxjs pptxjs改造开发 excel(xlsx) sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf(pdf) pdfjs pdfjs(npm) 图片 jquery.verySimpleImageViewer v-viewer // 数据渲染到canvas画布上 page.render(renderContext); }) }) 复制代码 实现效果 excel实现前端预览 代码实现 下载exceljs、handsontable 的库 通过exceljs读取到文件的数据 通过workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据 引入@handsontable/vue的组件HotTable 获取每一行的数据 const data = ws.getRows(1, ws.actualRowCount); }) // 渲染页面 import { HotTable } from "@handsontable

    3.8K51编辑于 2022-03-07
  • 来自专栏FE32 Code

    20 多个好用的 Vue 组件库

    特点如下: 可选行及粘性头部 虚拟分页 下载客户组件数据的 CSV 有数据层支持的多级分组 Tailwind 主题 Handsontable 地址:https://github.com/handsontable /handsontable/tree/master/wrappers/vue Handsontable 是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。 Handsontable 是一个 JavaScript 组件,它将数据网格功能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和 CRUD 操作。

    10.1K10编辑于 2022-10-27
  • 来自专栏Devops专栏

    Django 2.1.7 使用django-excel上传、下载excel报表

    orgtbl, plain simple read only: ndjson r/w: json tabulate 2.6, 2.7, 3.3, 3.4 3.5, 3.6, pypy pyexcel-handsontable handsontable in html handsontable same as above pyexcel-pygal svg chart pygal 2.7, 3.3, 3.4, 3.5 3.6

    4.5K20发布于 2019-10-09
  • 来自专栏前端开发博客

    最强国产开源电子表格-Luckysheet,强势登顶Github trending第一名!

    比较出名有spreadjs,handsontable,这两个插件有明显的缺点,spreadjs增值功能收费太贵,handsontable二次开发坑很多。

    3.7K20发布于 2020-11-05
  • 来自专栏用户7968880的专栏

    Angular10配置webpack打包 「详细教程」

    这里,笔者还把项目中使用到的moment、handsontable、angular库单独分离出来了。 node_modules[\\/]moment[\\/]/,           priority: -6 // 两个cacheGroup.priority相同时,先定义的会先命中         },         handsontable : {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,           moment',           test: /[\\/]node_modules[\\/]moment[\\/]/,           priority: -6         },         handsontable : {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,          

    6.9K20发布于 2021-01-21
  • 来自专栏前端技术

    主流表格控件工具对比与 SpreadJS+GcExcel 全栈解决方案技术解析

    万级数据,需手动优化仅支持基础数据导入导出需自定义开发企业级管理系统数据展示AGGrid跨框架大数据处理强、可扩展性高支持百万级数据,前端渲染优秀部分格式兼容,公式体系独立无原生配套组件纯前端复杂数据交互handsontable 纯前端复杂交互:AGGrid适合无后端协同需求的大数据可视化场景,handsontable适合轻量类Excel编辑场景。

    30210编辑于 2025-11-20
  • 来自专栏前端达人

    分享 7 个实用的 JavaScript 库,提升你的开发效率

    功能特点: 数据绑定:Handsontable 支持与各种数据源的绑定,能够实时显示和更新数据。 数据验证:它提供了强大的数据验证功能,确保数据的准确性和完整性。 https://github.com/handsontable/handsontable 2. i18next 当谈到为应用程序添加国际化(Internationalization,简称 i18n)功能时

    2K10编辑于 2023-11-22
  • 20K star!让网页设计秒变手绘风,这个开源库太有创意了!

    打造独特的绘本风格UI电子手账应用 - 实现真实的书写笔触效果创意互动装置 - 营造有温度的数字艺术体验同类项目对比项目名称核心能力独特优势适用场景Rough.js手绘风格渲染9种笔触参数调节创意设计/教育/可视化Handsontable

    55100编辑于 2025-03-05
  • 领券