使用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

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值