当前位置: 代码迷 >> 综合 >> Html页面上展示Excel表格 --Handsontable
  详细解决方案

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

热度:61   发布时间:2023-12-18 05:18:46.0

    最近项目中有使用到这个插件,于是重点了解了一下,在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': {

                        name: '上方插入一行'

                    },

                    'row_below': {

                        name: '下方插入一行'

                    },

                    "col_left": {

                        name: '左方插入列'

                    },

                    "col_right": {

                        name: '右方插入列'

                    },

                    "remove_row": {

                        name: '删除行',

                    },

                    "remove_col": {

                        name: '删除列',

                    },

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

                    'clear_custom': {

                        name: '清除数据',

                        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; 我也不知道我为什么要写两个,可能是尝试的时候一个没有生效这个大家自己下去尝试吧。今天就说这么多啦,不懂的可以留言我告诉你也可以私信我(不经常看),有用的话给个小心心吧!


 

  相关解决方案