Web开发中快速导出Excel文件(附代码)

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

1. 前端

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

姓名	职位	年龄	薪水
Tiger NixonTiger Nixon	System Architect	61	$320,800
Garrett Winters	Accountant	63	$170,750
Ashton Cox	Junior Technical Author	66	$86,000
Cedric Kelly	Senior Javascript Developer	22	$433,060
Herrod Chandler	Sales Assistant	59	$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

1
2
<script type="text/javascript" src="tableExport.js"></script>
<script type="text/javascript" src="jquery.base64.js"></script>

导出PNG

1
<script type="text/javascript" src="html2canvas.js"></script>

导出PDF

1
2
3
<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，否则中文会有乱码。

1
2
3
4
5
6
7
8
<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 文件，只需简单配置一下即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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函数特殊处理一下，否则导出数据会出现乱码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 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