使用tableExport导出bootstrap-table表格 支持中文的Excel等格式

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

需要的jar包

jquery下载 
bootstrap下载 
bootstrap table下载  

tableExport下载 

  网页中需要引入的js和css

 <!--            描述:样式导入        -->        <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>
 $('#table').bootstrapTable('destroy').bootstrapTable({        method: 'post',        dataType: 'json',        height: 560,        toolbar: '#toolbar',               //工具按钮用哪个容器        pagination: true,                   //是否显示分页(*)        maintainSelected: true,             //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项        sidePagination: "client",          //分页方式:client客户端分页,server服务端分页(*)        pageNumber: 1,                       //初始化加载第一页,默认第一页        pageSize: 10,                       //每页的记录行数(*)        pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)        search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大        strictSearch: false,                //设置为 true启用 全匹配搜索,否则为模糊搜索        showRefresh: true,                  //是否显示刷新按钮        minimumCountColumns: 2,             //最少允许的列数        clickToSelect: true,                //是否启用点击选中行        sortStable: true,         showExport: true,  //是否显示导出按钮        buttonsAlign:"right",  //按钮位置        exportDataType: 'all',   //导出的方式 all全部 selected已选择的  basic', 'all', 'selected'.        Icons:'glyphicon glyphicon-export', //导出图标        exportTypes:[ 'excel','doc','xlsx','csv', 'txt', 'sql' ],  //导出文件类型 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'        exportOptions:{            // ignoreColumn: [0,1],  //忽略某一列的索引            fileName: questionNaireName,  //文件名称设置            worksheetName: 'sheet1',  //表格工作区名称            tableName: questionNaireName,            // excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], 设置格式        },    });

Options

showExport          //是否显示导出按钮

  • type: Boolean
  • description: set true to show export button.
  • default: false

exportDataType   //导出表格方式(默认basic:只导出当前页的表格数据;all:导出所有数据;selected:导出选中的数据)

  • type: String
  • description: export data type, support: ‘basic’, ‘all’, ‘selected’.
  • default: basic

exportTypes   //导出文件类型 ,支持多种类型文件导出

  • type: Array
  • description: export types, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’, ‘pdf’.
  • default: ['json', 'xml', 'csv', 'txt', 'sql', 'excel']

exportOptions  //导出的表格参数设置,这里参照tableExport.jquery.plugin插件中的参数进行设置,点击官网文档中的option蓝色字体就可跳转到该插件的说明文档处,网址:https://github.com/hhurz/tableExport.jquery.plugin#options。

  • type: Object
  • description: export options of tableExport.jquery.plugin
  • default: {}

Icons     //导出按钮图标设置

  • export: ‘glyphicon-export icon-share’

使用案例

       showExport: true,  //是否显示导出按钮         buttonsAlign:"right",  //按钮位置         exportTypes:['excel'],  //导出文件类型         Icons:'glyphicon-export',         exportOptions:{             ignoreColumn: [0,1],  //忽略某一列的索引             fileName: '总台帐报表',  //文件名称设置             worksheetName: 'sheet1',  //表格工作区名称             tableName: '总台帐报表',             excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],             onMsoNumberFormat: DoOnMsoNumberFormat         }, 

另附如何解决导出pdf中文乱码问题

http://blog.csdn.net/youand_me/article/details/76642434

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

发表评论