Html页面上展示Excel表格 --Handsontable

最近项目中有使用到这个插件，于是重点了解了一下，在github上有9k+的星星，虽然是收费产品，但是别急，小编有办法去掉水印呀！一起来看看吧！

首先列出它的官方文档 Handsontable，学习一个东西一定要看它的API文档哦！

其次，它的兼容性，不管你的是Vue项目，React项目、Angle...（不会拼。。。）项目、还是H5，它都是兼容的！这个不要太感动了，一起来操作一下吧！

如果是H5项目，查看这个H5项目，别人写的很详细，效果如下图。

H5效果图

我主要做了react项目下实现效果，在npm安装后 npm install handsontable @handsontable/react 在项目中引入css和组件直接使用

关键的配置如下：

width: '100%', //表格的宽度

height: 470, //表格的高度设置了才会出现scroll

className: "htCenter htMiddle", //垂直水平居中

colWidths: 55, //每列的宽度

rowHeights: 35, //每行的高度

//fixedRowsTop: 2, //固定两行excel的冻结

//fixedColumnsLeft: 3, //固定两列固定行列会影响表格排版

mergeCells: true, //表示允许单元格合并

manualColumnMove: false, //列可拖动

manualRowMove: false, //行可拖动

manualColumnResize: true, //列可拖拽调大小

manualRowResize: true, //行可拖拽调大小

autoColumnSize: false, //当值为true且列宽未设置时，自适应列大小

columnSorting: false, // 排序

contextMenu: true, //右键菜单

copyable: true, // 允许键盘复制

renderer: function(instance, td, row, col, prop, value, cellProperties) {

// 渲染为text类型，可选的有TimeRenderer、PasswordRenderer等不同的类型

Handsontable.renderers.TextRenderer.apply(this, arguments);

// 判断条件

if (row === 0 || row === 1 || row === 2) {

td.style.backgroundColor = '#e0ecff';

// 此处可以单独渲染某行或某列根据条件渲染比如背景色字体、颜色、粗细等等

}

dropdownMenu: true,//头部是否显示menu

contextMenu: { //内容部分的menu 对功能汉化

items: {

'row_above': {

'row_below': {

"col_left": {

"col_right": {

"remove_row": {

"remove_col": {

'separator': Handsontable.plugins.ContextMenu.SEPARATOR,

'clear_custom': {

callback: function() {

this.clear();

}

afterChange: function(changes, source) { //数据改变时触发此方法捕捉数据更改

console.log(this.getData(), '/', changes, '/', source);

由于项目原因，不好意思，效果图不能展示，抱歉抱歉！需要注意的是此插件的数据格式有两种，一种是数组类型的，如果数据复杂，合并单元格较多，建议使用这种数据格式。还有一种是对象类型的，多用于数据简单的，操作起来更方便。

最后再来说说这个插件都有哪些bug吧，

1、在冷冻行或列后，合并的单元格会遭到破坏

2、冷冻行或列后，查看下面的数据会有延迟（情况出现少），若右侧超出页面大小向下滑动，会出现有的滑有的不滑，即错位，体验不好

3、导出表格尽量后端做导出，前端导出会出现乱码的情况。

最后，解决一下下面水印的情况，在你安装完依赖后，node_models/handsontable/disthandsontable.full.css文件里面修改css 大概267行吧。。。

#hot-display-license-info {

display: none !important;

visibility: hidden;

font-size: 10px;

color: #323232;

padding: 5px 0 3px 0;

font-family: Helvetica, Arial, sans-serif;

text-align: left;

}

#hot-display-license-info a {

font-size: 10px;

visibility: hidden;

display: none;

}

加上display：none； visibility:hidden; 我也不知道我为什么要写两个，可能是尝试的时候一个没有生效这个大家自己下去尝试吧。今天就说这么多啦，不懂的可以留言我告诉你也可以私信我（不经常看），有用的话给个小心心吧！

Html页面上展示Excel表格 --Handsontable相关推荐

【Vue】vue2上传Excel表格到后台实战教程（接上一篇下载Excel模板表格到本地）
参考文章作者原文链接入口项目场景: 关于数据新增,需要从后台下载一个Excel表格,然后在表格里面添加数据,再上传给后台,后台做解析处理,往数据库添加数据问题描述需要用到elementUI的文 ...
springboot上传excel表格到数据库
1.引入相关poi依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi< ...
计算机excel怎么打开,如何在电脑上打开excel表格制作!
[急]如何修改excel图表数轴上的数字范围在生成图表之前,选择图表的图表,然后再系列里选择"分类(X)轴标志"然后选择你要选择的数字就OK. excel表格制作中,如何修改标题 ...
HTML展示Excel表格数据（支持多sheet页、ie浏览器、xls、xlsx）
HTML展示Excel表格数据 xlsx.js插件使用 1.引入 xlsx.js插件 2.添加div标签 3.展示div上如果 ie 前台控制台显示不支持Slice对象,解决办法: xlsx.js插 ...
php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
手机号码批量导入通讯录php,怎么从电脑上的excel表格的手机号码导入通讯录到华为手机：...
如何将电脑中的Excel表格导入手机中 excel文件就如果图片音乐文件一样可被传送到手机中. 传送方法可以是用数据线把手机作为存储设备使用或用无线如QQ等可以传送文件的应用程序. 但手机上要想打开E ...
html导出excel代码,html页面导出为excel表格(示例代码)
简介这篇文章主要介绍了html页面导出为excel表格(示例代码)以及相关的经验技巧,文章约4421字,浏览量324,点赞数9,值得推荐! 导出考勤表格王婷111 一见倾城333 祈澈姑娘222 P ...
计算机突然断电不丢失已保存的数据是,(电脑上的Excel表格没保存，突然断电了。请问要怎么才能找回)表格数据不见了怎么办...
电脑上的Excel表格没保存,突然断电了.请问要怎么才能找回找断电而未保存的Excel表格的方法及步骤: ,打Excel软件. 2. 打开左上角工具栏的"文件"选项卡. 3. ...
element-ui上传excel表格，展示在微信小程序中
文章目录 1.上传表格 2.小程序端拉取列表获取表格路径 3.测试能否打开 1.上传表格上传成功后调用接口发给后端,后端保存在服务器中,然后返回一个文件路径 /* html <el-uploa ...
实现Excel直接在以Html的形式在页面上展示
目前大多数Excel内容需要在页面展示时,通常需要使用控件或将excel转为html的形式在页面上进行展示,但是经常会出现达不到理想的效果.本文主要使用NPOI读取excel内容以及单元格样式,然后使 ...

Html页面上展示Excel表格 --Handsontable

Html页面上展示Excel表格 --Handsontable相关推荐

最新文章

热门文章