要导出的数据：https://examples.bootstrap-table.com/json/data1.json?order=asc

使用的插件（注意插件版本依赖）：tableExport.jquery.plugin

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>TableExport</title>

    <!--jquery-->

    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

    <!--bootstrap-->

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!--fontawesome-->

    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>

    <!--bootstrap-table-->

    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>

    <!--bootstrap-table-lanuage-->

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>

    <!--bootstrap-table-export-->

    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>

    <!--在客户端保存生成的导出文件-->

    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

    <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->

    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>

    <!--以PNG格式导出表格-->

    <!--对于IE支持包括 html2canvas 之前的 es6-promise-->

    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>

    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

    <!--将表导出为PDF文件-->

    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>

    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

    <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->

    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

</head>

<body>

<div class="container">

    <div id="toolbar">

        <select class="form-control">

            <option value="">Export Basic</option>

            <option value="all">Export All</option>

            <option value="selected">Export Selected</option>

        </select>

    </div>

    <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>

    <table id="table" data-locale="zh-CN"></table>

</div>

<script>

    $(function () {

        $.ajax({

            url: "https://examples.bootstrap-table.com/json/data1.json?order=asc",

            success: function (result) {

                // 初始化表格

                $('#toolbar').find('select').change(function () {

                    $('#table').bootstrapTable('destroy').bootstrapTable({

                        data: result,

                        pagination: true,//显示分页

                        clickToSelect: true,//单击列表选中

                        toolbar: "#toolbar",//显示工具栏

                        showToggle: true,//工具栏上显示列表模式切换

                        showExport: true,//工具栏上显示导出按钮

                        exportDataType: $(this).val(),//显示导出范围

                        exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式

                        exportOptions: {//导出设置

                            fileName: 'Tablexxx',//下载文件名称

                        },

                        columns: [

                            {

                                field: 'state',

                                checkbox: true,

                                visible: $(this).val() === 'selected'

                            },

                            {

                                field: 'id',

                                title: 'ID'

                            }, {

                                field: 'name',

                                title: 'Item Name'

                            }, {

                                field: 'price',

                                title: 'Item Price'

                            }

                        ]

                    })

                }).trigger('change');

            }

        });

    })

    // 自定义按钮导出数据

    function exportData(){

        $('#table').tableExport({

            type: 'excel',

            exportDataType: "all",

            ignoreColumn: [0],//忽略某一列的索引

            fileName: 'Tablexxx',//下载文件名称

            onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容

                console.info(data);

                return data;

            },

        });

    }

</script>

</body>

</html>

结果

bootstrap-table-export：https://bootstrap-table.com/docs/extensions/export/

tableexport.jquery.plugin CDN：https://unpkg.com/tableexport.jquery.plugin/

BootstrapTable-导出数据的更多相关文章

  1. CRL快速开发框架系列教程九(导入/导出数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  2. Vertica 导出数据测试用例

    需求:构建简单的测试用例,完成演示Vertica导出数据的功能. 测试用例:导出test业务用户t_jingyu表中的数据. 一.初始化测试环境 二.导出数据 2.1 vsql命令说明帮助 2.2 导 ...

  3. 1.ASP.NET MVC使用EPPlus，导出数据到Excel中

    好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...

  4. 导出数据到Excel --使用ExcelReport有感

    先看图,这是几个月前用NPOI写的导出数据到Excel,用了上百行代码,而且难控制,导出来也比较难看 excel打开的效果 下面是我用ExcelReport类库导出到Excel的操作 1.首先引用Ex ...

  5. MySQL 导出数据

    MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中我们将数据表 cnbl ...

  6. 使用Open xml 操作Excel系列之二--从data table导出数据到Excel

    由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...

  7. Dynamics CRM导出数据到Excel

    原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...

  8. java 导出数据为word文档（保持模板格式）

    导出数据到具体的word文档里面,word有一定的格式,需要保持不变 这里使用freemarker来实现: ①:设计好word文档格式,需要用数据填充的地方用便于识别的长字符串替换  如  aaaaa ...

  9. PHP导出数据到CSV文件函数 csv_export()

    后台往往需要导出各种数据到 Excel文档中.通常我们是导出 .csv文件格式,PHP导出函数参考代码如下: /** * 导出数据到CSV文件 * * @param array $data 二维数组( ...

  10. oracle导入导出数据

    导入数据,cmd   imp 导出数据,cmd   exp

随机推荐

  1. JS 引入方式 基本数据类型 运算符 控制语句 循环 异常

    一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览 ...

  2. 十款 Chrome 扩展工具，提高前端编码效率

    1. 掘金 Chrome 插件 对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧.那么,开发者能够在哪里获取需要的技术内容呢?过去,你可能需要在 GitHub ...

  3. File operations 1

    1:只读(‘r' 和 ’rb'以字节读) f = open('d:\模特主妇护士班主任.txt',mode='r',encoding='UTF-8') content = f.read() print ...

  4. linux下安装多个Tomcat

    编辑环境变量:vi /etc/profile 加入以下代码 ##########first tomcat########### CATALINA_BASE=/usr/local/src/tomcat ...

  5. 三十六、fetch

    https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

  6. ubuntu下安装Visual Studio Code

    环境准备 先安装一般umake没有问题 sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make sudo apt-get update sudo ...

  7. C#，WPF中使用多文本显示数据，并对其数据进行关键字高亮等操作

    需求:针对多文本信息显示,我们需要对其内容中的某些关键字或者某行进行高亮显示,并用不同颜色显示. 分析:在C#中,首先要进行多文本信息显示,可以RichTextBox(不要使用TextBox)控件,该 ...

  8. C#之重写与隐藏

    一 重写与隐藏区别 (1)方法重写:就是在基类中的方法用virtual关键字来标识,然后在继承类中对该类进行重写(override),这样基类中的方法已经被重写了,已经失去了功能了.当让基类的对象的引 ...

  9. 【zabbix教程系列】四、用户自定义监控

    本篇介绍运用zabbix进行自定义监控,以系统用户登录数量为例. 一.zabbix自定义语法 UserParameter=<key>,<shell command> 二.age ...

  10. Warning: Using a password on the command line interface can be insecure.

    [root@qttc ~]# /usr/local/mysql/bin/mysqldump  -uroot -proot db > bak.sqlWarning: Using a passwor ...