实现HTML表格导出和导入Excel功能

 

导出Excel流程：
1.调用exportTableData读取导出数据，读取过程，使用JQUERY遍历要导出的表格，读取表格中每个单元格的属性，最后生成导出数据对象，为导出Excel做准备
Javascript 代码
{      
    name: '', //存放导出的Excel文件名      
    widths: [xxx,…,xxx], //各个列的宽度数组      
    data: [   //各行的导出数据      
        {      
            height: xxx,  //本行高度      
            cell: [       //本行各个单元格数据      
                {      
                    range: 'rowSpan.colSpan', //本单元格跨行、跨列的数量      
                    text: '',  //本单元格内容      
                    clazz: ''  //本单元格css类      
                },…{      
                …      
                }      
            ]      
        },…,{      
        }      
    ], …,[      
    …      
    ]      
}  

{   
    name: '', //存放导出的Excel文件名   
    widths: [xxx,…,xxx], //各个列的宽度数组   
    data: [   //各行的导出数据   
        {   
            height: xxx,  //本行高度   
            cell: [       //本行各个单元格数据   
                {   
                    range: 'rowSpan.colSpan', //本单元格跨行、跨列的数量   
                    text: '',  //本单元格内容   
                    clazz: ''  //本单元格css类   
                                },…{   
                                …   
                                }   
                        ]   
        },…,{   
        }   
        ], …,[   
        …   
        ]   
}
在这个导出数据对象中，首先设置导出文件的文件名和各列的宽度数组，然后是存放行数据的数组。读取各列宽度是通过读取colHTML元素实现的，所以要求表格中必须设置col元素
行数据包括本行的高度，以及行中单元格数据的数组，因为有跨行的关系，各行存放的单元格的数量可能是不一样的。
单元格数据包括：单元格的跨行、跨列属性，这个属性不是必须的，如果单元格只是跨一行、一列，这个属性可以不设置，然后是单元格的内容，单元格的CSS类风格，这个属性比较重要，要求必须设置，这样在导出的Excel数据中，才能确定该单元格应用那种风格属性。
在读取导出数据过程中，提供回调函数，可以让你对导出的单元格数据值进行修改，例如，有的单元格的内容是个按钮，那么可以控制导出的值为空字符串
回调函数形式如下：
Javascript代码
callback: function(tr, td, row, col, val) {   
    if (val.indexOf('button') >= 0)   
        return '';   
    else  
        return val;   
}  

callback: function(tr, td, row, col, val) {
        if (val.indexOf('button') >= 0)
                return '';
        else
                return val;
}
2.对数据对象编码成JSON字符串，这里是通过json.js提供的编码函数实现的。然后提交给后台处理

3.后台通过编写了一个servlet实现数据分析和生成EXCEl，在这里使用了JSON-LIB提供的工具读取JSON字符串

4.后台实现：
为了能够在EXCEL中应用表格的各种CSS 效果，定义了ExcelCSS类，存放Excel能够支持的CSS风格，并且在ExcelOperate中定义了一些CSS样式，CSS样式的名称与单元格中的class属性名称是相同的。当然，以后也可以改成使用配置文件去定义可用的CSS样式
另外，在Excel中，对于Css相同的的单元格，可以共享同一个HSSFCellStyle样式，所以，通过定义
Java代码
Map<String, ExcelCss> cssMap = new HashMap<String, ExcelCss>()  

Map<String, ExcelCss> cssMap = new HashMap<String, ExcelCss>()实现共享 功能
针对单元格跨行、跨列情况，通过定义一个包含所有行、列的二维数组
Java代码
HSSFCellStyle[][] placeholder = new HSSFCellStyle[rows][cols]  

HSSFCellStyle[][] placeholder = new HSSFCellStyle[rows][cols]
写单元格以前，首先检查当前行，当前位置是否已经有单元格设置的HSSFCellStyle值，如果有，则向后搜索未设置值的位置，把这个位置作为要写入的单元格位置
写完单元格数据后，如果单元格跨行、跨列，则会在数组中该单元格占据的所有位置设置该单元格的HSSFCellStyle值，并移动下一个插入位置的列值
最后，把生成的EXCEL数据写入输出流

到软件公司学 IT 技术 http://www.tsp2c.cn/