目录

    在Web开发中,常会遇到数据导出的需求。这篇主要介绍如何快速将数据导出,并保存为Excel文件。

    1. 前端

    Web开发中,格式化数据常以table的形式展示。下面是一个人员薪酬信息表,以导出这份数据为例。

    姓名职位年龄薪水
    Tiger NixonTiger NixonSystem Architect61$320,800
    Garrett WintersAccountant63$170,750
    Ashton CoxJunior Technical Author66$86,000
    Cedric KellySenior Javascript Developer22$433,060
    Herrod ChandlerSales Assistant59$327,900

    1.1 tableExport

    tableExport是一个表格导出Jquery插件,支持导出格式:JSON、XML、PNG、CSV、TXT、SQL、MS-Word、Ms-Excel、Ms-Powerpoint、PDF。

    需要注意的是,如果表头有中文,原项目中的 jquery.base64.js,会报错:Uncaught INVALID_CHARACTER_ERR: DOM Exception 5 VM2832 jquery.base64.js:136,需要更新。推荐 jQuery 官网插件,前往。tableExport原生项目对中文数据导出并不友好。

    • 引入js
    <script type="text/javascript" src="tableExport.js"></script>
    <script type="text/javascript" src="jquery.base64.js"></script>
    
    • 导出PNG
    <script type="text/javascript" src="html2canvas.js"></script>
    
    • 导出PDF
    <script type="text/javascript" src="jspdf/libs/sprintf.js"></script>
    <script type="text/javascript" src="jspdf/jspdf.js"></script>
    <script type="text/javascript" src="jspdf/libs/base64.js"></script>
    
    • 使用方法

    直接调用插件的tableExport方法,设置导出类型即可。建议escape设置为true,否则中文会有乱码。

    <script src='js/jquery.base64.js'></script>
    <script src='js/tableExport.js'></script>
    <script>
    function tableexport_export(){
        $('#tableID').tableExport({type:'excel',excape:'true'});
    }
    </script>
    <button onClick="tableexport_export()">tableExport导出Excel</button>
    

    1.2 kendoGrid

    Kendo UI 是一个用于快速开发 HTML5 UI 的强大框架。基于 HTML5、CSS3和JavaScript标准。Kendo UI 包含了开发现代 JavaScript 开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。kendoGrid 支持将表格数据导出为 Excel 文件,只需简单配置一下即可。

    <div id="kendogrid_table"></div>
    <link rel="stylesheet" type="text/css" href="styles/kendo.common.min.css"/>
    <script src='js/kendo.all.min.js'></script>
    <script src='js/jszip.min.js'></script>
    $(document).ready(function() {
        $('#tableID').kendoGrid({
            pageable: false,
            sortable: true,
            dataSource: [
                {'name': 'Tiger Nixon', 'position': 'System Architect', 'age': '61', 'salary': '$320,800'},
                {'name': 'Garrett Winters', 'position': 'Accountant', 'age': '63', 'salary': '$170,750'},
                {'name': 'Ashton Cox', 'position': 'Junior Technical Author', 'age': '66', 'salary': '$86,000'},
                {'name': 'Cedric Kelly', 'position': 'Senior Javascript Developer', 'age': '22', 'salary': '$433,060'},
                {'name': 'Herrod Chandler', 'position': 'Sales Assistant', 'age': '59', 'salary': '    $137,500'},
                {'name': 'Rhona Davidson', 'position': 'Integration Specialist', 'age': '55', 'salary': '$327,900'},
            ],
            toolbar: ['excel'],
            columns: [
                {
                    field: 'name',
                    title: '姓名'
                },
                {
                    field: 'position',
                    title: '职位'
                },
                {
                    field: 'age',
                    title: '年龄'
                },
                {
                    field: 'salary',
                    title: '薪水'
                }
            ]
        })
    });
    

    1.3 DataTables

    kendoGrid是一款商业的前端表格工具,使用上收到一定限制。如果项目组允许使用DataTables这款表格工具,那么也不错。DataTabels同样也提供丰富的工具,用于数据的导出。 需要注意的是,如果表格数据中存在特殊字符,比如$,需要customizeData函数特殊处理一下,否则导出数据会出现乱码。

    <link rel="stylesheet" type="text/css" href="extensions/Buttons/css/buttons.dataTables.min.css"/>
    <script src='js/jquery.dataTables.min.js'></script>
    <script src='js/dataTables.buttons.min.js'></script>
    <script type="text/javascript" src="extensions/Buttons/js/buttons.html5.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#tableID').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                    'extend': 'excel',
                    'text': '导出',//定义导出excel按钮的文字
                    customizeData: function (data) {
                        for (var i = 0; i < data.body.length; i++) {
                            for (var j = 0; j < data.body[i].length; j++) {
                                data.body[i][j] = '\u200C' + data.body[i][j];
                            }
                        }
                    }
                }],
                paging: true, //隐藏分页
                ordering: false, //关闭排序
                info: false, //隐藏左下角分页信息
                searching: false, //关闭搜索
                lengthChange: false,
            });
        });
    </script>
    

    2. 后端

    当数据量很大时,后台分页,前端就无法导出完整的数据。这时,可以采用后端数据导出,这里以Django为例,直接给前端返回excel文件。

    # coding=utf-8
    from django.http import HttpResponse
    import xlwt
    
    def get_export_excel_response(dic_data_list, filename='export'):
        '''
        :param dic_data_list = [{
                u"数据1": randint(0, 999),
                u"数据2": randint(0, 999),
                u"数据3": randint(0, 999),
                u"数据4": randint(0, 999),
                u"数据5": randint(0, 999),
                u"数据6": randint(0, 999),
                u"数据7": randint(0, 999),
                u"数据8": randint(0, 999),
            },{
                ......
            }]: 
        :param filename: 文件名
        :return: HttpResponse excel文件
        '''
        head_list = dic_data_list[0].keys() if dic_data_list else []
        # 创建excel表
        excel = xlwt.Workbook(encoding='utf-8', style_compression=2)
        worksheet = excel.add_sheet(filename)
        # 写入表头
        for col in range(0, len(head_list)):
            worksheet.col(col).width = 256 * 20
            worksheet.write(0, col, head_list[col], set_style('Times New Roman', 220, True))
        # 写入数据
        for row in range(1, len(dic_data_list) + 1):
            for col, single_head in enumerate(head_list):
                worksheet.write(row, col, dic_data_list[row - 1][single_head], right())
    
        response = HttpResponse(content_type="application/ms-excel")
        filename = filename.encode('utf-8')
        response['Content-Disposition'] = 'attachment;filename=%s.xls' % filename
        excel.save(response)
        return response
    
    
    def set_style(name, height, bold=False):
        style = xlwt.XFStyle()  # 初始化样式
        font = xlwt.Font()  # 为样式创建字体
        font.name = name  # 'Times New Roman'
        font.bold = bold  # 是否粗体
        font.color_index = 4
        font.height = height
        al = xlwt.Alignment()
        al.horz = xlwt.Alignment.HORZ_CENTER  # 设置水平居中
        al.vert = xlwt.Alignment.VERT_CENTER  # 设置垂直居中
        al.wrap = xlwt.Alignment.WRAP_AT_RIGHT  # 设置文字可以换行
        style.alignment = al
        style.font = font
        # style.borders = borders
        return style
    
    
    def right():
        style = xlwt.XFStyle()  # 初始化样式
        al = xlwt.Alignment()
        al.horz = xlwt.Alignment.HORZ_RIGHT  # 设置水平靠右
        al.vert = xlwt.Alignment.VERT_CENTER  # 设置垂直居中
        al.wrap = xlwt.Alignment.WRAP_AT_RIGHT  # 设置文字可以换行
        style.alignment = al
    
        return style
    

    3. 参考