bootstrap table和tableExport导出支持中文的Excel和pdf等表格

来源：互联网发布：兴趣图谱源码编辑：程序博客网时间：2024/06/10 16:52

前言

由于最近项目有一个导出表格为pdf格式，所以就做了这个功能。由于项目的表格是基于bootstrap和bootstrap table实现的，相对于easyUI来说它的优点是更方便，更好兼容。
从代码可以发现bootstrap table本身是没有实现表格的导出的，需要扩展插件tableExport，扩展的tableExport在导出csv，txt，sql，json等格式的时候能很好的支持中文，不过需要导入相应js文件（本文会解决），但是对于pdf格式的就不支持中文了，如何解决是本文的中点。

前提
首先得下载几个插件：

jquery下载
bootstrap下载
bootstrap table下载
tableExport下载

注意

由于bootstrap和其扩展的插件都是基于jquery来实现的，所以在使用这些插件的时候必须先把jquery引入。
对于版本有要求，bootstrap对jquery的版本有依赖，在bootstrap的bower.json 文件中列出了 bootstrap 所支持的 jquery 版本，请对应下载jquery版本。
不能把单个的css、js文件提出来放在一个文件中因为有的文件有关联，提出来就导致某些功能用不了。

步骤下载的文件整理：

新建文件bootstrap_above；
将下载的tableExport.jquery.plugin-master文件重命名为tableExport；
将重命名的tableExport和下载的bootstrap、bootstrap-table-develop、jquery-1.9.1文件放入bootstrap_above文件中。
修改文件，tableExport默认是使用jspdf来实现导出pdf的，但是jspdf不支持中文，所以我们改用pdfmake方式，但是必须自定义字体生成vfs_fonts.js，博主已经自定义好需要的请自己下载。将vfs_fonts.js文件替换掉bootstrap_above\tableExport\libs\pdfmake目录下的vfs_fonts.js文件。
将tableExport.js文件的代码

pdfmake: {enabled: false,                               // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)                  docDefinition: {pageOrientation: 'portrait',  // 'portrait' or 'landscape'                                  defaultStyle: {font: 'Roboto' // default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js                                                }                                 },                  fonts: {}                 },

修改为

pdfmake: {enabled: true},

将tableExport.js文件的代码

          var docDefinition = { content: [ {                                  table: {                                    headerRows: $hrows.length,                                    widths: widths,                                    body: body                                  }                               }]};          $.extend(true, docDefinition, defaults.pdfmake.docDefinition);          pdfMake.fonts = {            Roboto: {              normal: 'Roboto-Regular.ttf',              bold: 'Roboto-Medium.ttf',              italics: 'Roboto-Italic.ttf',              bolditalics: 'Roboto-MediumItalic.ttf'            }          };            $.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);

替换为

pdfMake.fonts = {                Roboto: {                    normal: 'Roboto-Regular.ttf',                    bold: 'Roboto-Medium.ttf',                    italics: 'Roboto-Italic.ttf',                    bolditalics: 'Roboto-Italic.ttf'                },                微软雅黑: {                    normal: 'msyh.ttf',                    bold: 'msyhbd.ttf',                    italics: 'msyh.ttf',                    bolditalics: 'msyhbd.ttf'                }            };            $.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);            var docDefinition = {                pageOrientation: 'landscape',                content: [                    {                        table: {                            headerRows: $hrows.length,                            widths: widths,                            body: body                        }                    }                ],                defaultStyle: {                    font: '微软雅黑'                }            };            $.extend(true, docDefinition, defaults.pdfmake.docDefinition);

至此前期工作就做好了，接下来就是使用了。

html代码（注意引用js的顺序，部分顺序不能改变）

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link rel="icon" href="img/favicon.ico">        <title>Bootstrap 模板</title>        <!--            描述：样式导入        -->        <link rel="stylesheet" href="js/bootstrap_above/bootstrap/css/bootstrap.min.css" />        <link rel="stylesheet" href="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.css"/>        <!--            描述：js导入，注意顺序，jquery必须引入            bootstrap-table-zh-CN.js为表格汉化的文件            FileSaver.min.js等是关联引用文件        -->        <script src="js/bootstrap_above/jquery-1.9.1/jquery.min.js"></script>        <script src="js/bootstrap_above/bootstrap/js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.js"></script>        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>        <script src="js/bootstrap_above/tableExport/libs/pdfmake/pdfmake.min.js"></script>        <script src="js/bootstrap_above/tableExport/libs/pdfmake/vfs_fonts.js"></script>        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/FileSaver/FileSaver.min.js"></script>        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF/jspdf.min.js"></script>        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>        <script type="text/javascript" src="js/bootstrap_above/tableExport/tableExport.js"></script>        <script src="js/table.js"></script>    </head>    <body>        <table class="table-responsive" id="db_dependences">        </table>    </body></html>

js块table.js代码

$(function () {    $('#db_dependences').bootstrapTable({        method:'POST',        dataType:'json',        contentType: "application/x-www-form-urlencoded",        cache: false,        striped: true,                              //是否显示行间隔色        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）        showColumns:true,        pagination:true,        minimumCountColumns:2,        pageNumber:1,                       //初始化加载第一页，默认第一页        pageSize: 20,                       //每页的记录行数（*）        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）        uniqueId: "id",                     //每一行的唯一标识，一般为主键列        showExport: true,                            exportDataType: 'all',        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型        columns: [{            field: 'id',            title: 'Item ID'        }, {            field: 'name',            title: 'Item Name'        }, {            field: 'price',            title: 'Item Price'        }],        data: [{            id: 1,            name: '项目 1',            price: '价格$1'        }, {            id: 2,            name: '项目 2',            price: '价格$2'        }]    });});

结果不多说有图才有真相

界面截图a
界面截图b
pdf结果

源码下载

下载链接：ExportPDF_ch
注：本文为原创，转载请注明出处。

阅读全文

2 2