要导出的数据：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. 设计模式系列之装饰模式(Decorator Pattern)

    装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装.这种模式创建了一个装饰类,用来包装原 ...

  2. Python3 调试技巧 —— 死循环

    说下Python3不使用gdb的自身调试 前情提要:服务器莫名卡死,用网上的方法用gdb,下载了很多组件,包括那个libpython.py,都没什么用,看不到堆栈,也试了保存core文件等等 大事找官 ...

  3. Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块

    Python第十三天   django 1.6   导入模板   定义数据模型   访问数据库   GET和POST方法    SimpleCMDB项目   urllib模块   urllib2模块 ...

  4. 《SQL CookBook 》笔记-第三章-多表查询

    目录 3.1 叠加两个行集 3.2 合并相关行 3.3 查找两个表中相同的行 3.4 查找只存在于一个表中的数据 3.5 从一个表检索与另一个表不相关的行 3.6 新增连接查询而不影响其他连接查询 3 ...

  5. WSL(Windows Subsystem for Linux)--Pico Process Overview

    [转载] Windows Subsystem for Linux -- Pico Process Overview Overview This post discusses pico processe ...

  6. 关于Http

    摘自:菜鸟教程 HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(www)服务器传输超文本到本地浏览器的传送协议. HTTP ...

  7. Linux新手随手笔记1.7

    配置网卡(本地电脑) Vment1   仅主机模式 Vment8   nat模式 物理机 : 192.16810.1  /255.255.255.0 服务器 : 192.168.10.10 /255. ...

  8. 三。Hibernate 注解形式

    Hibernate支持JPA注解的jar包 JPA全称: Java Persistence API JPA和Hibernate之间的关系,可以简单的理解为JPA是标准接口,Hibernate是实现. ...

  9. .NET方法无限传参数技术

    是否有这样的需求在创建函数时参数个数不固定,又不想使用重载,那么下面这个技术就比较适合. 相信你一定见过下面这的代码: ); Format 就是string的一个函数,第一个参数是固定的字符串类型,那 ...

  10. VMware Workstation 14安装VMware Tools

    1 单击虚拟机,选择安装VMware Tools 2 此时会在桌面出现VWware Tools 3 双击进入 4 把*.tar.gz压缩文件cp到/home下 5 sudo tar -zvxf  *. ...