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

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

前言

  • 由于最近项目有一个导出表格为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
注:本文为原创,转载请注明出处。

点这里可以跳转到人工智能网站

发表评论