代码

<!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-导出数据的更多相关文章

CRL快速开发框架系列教程九(导入/导出数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
Vertica 导出数据测试用例
需求:构建简单的测试用例,完成演示Vertica导出数据的功能. 测试用例:导出test业务用户t_jingyu表中的数据. 一.初始化测试环境二.导出数据 2.1 vsql命令说明帮助 2.2 导 ...
1.ASP.NET MVC使用EPPlus，导出数据到Excel中
好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...
导出数据到Excel --使用ExcelReport有感
先看图,这是几个月前用NPOI写的导出数据到Excel,用了上百行代码,而且难控制,导出来也比较难看 excel打开的效果下面是我用ExcelReport类库导出到Excel的操作 1.首先引用Ex ...
MySQL 导出数据
MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据以下实例中我们将数据表 cnbl ...
使用Open xml 操作Excel系列之二--从data table导出数据到Excel
由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...
Dynamics CRM导出数据到Excel
原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...
java 导出数据为word文档（保持模板格式）
导出数据到具体的word文档里面,word有一定的格式,需要保持不变这里使用freemarker来实现: ①:设计好word文档格式,需要用数据填充的地方用便于识别的长字符串替换如 aaaaa ...
PHP导出数据到CSV文件函数 csv_export()
后台往往需要导出各种数据到 Excel文档中.通常我们是导出 .csv文件格式,PHP导出函数参考代码如下: /** * 导出数据到CSV文件 * * @param array $data 二维数组( ...
oracle导入导出数据
导入数据,cmd imp 导出数据,cmd exp

随机推荐

章节十、4-CSS Classes---用多个CSS Classes定位元素
以下演示操作以该网址中的输入框为例:https://learn.letskodeit.com/p/practice 一.使用input[class=inputs]验证元素是否唯一注意:使用“clas ...
js用canvans 实现简单的粒子运动
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
简单shellcode编写
0x00 介绍 Shellcode 是指经过精心设计的一串指令,一旦注入正在运行的应用程序中即可运行,常用于栈和基于堆的溢出.术语Shellcode意思指的便是用于启动一个命令Shell的已编写好的可 ...
Anaconda在Windows上安装不上原因
倒腾了一下午安装Anaconda,[所有程序]中只有一个Anaconda的目录,目录中只有一个anaconda prompt,最后发现是因为环境中原先就安装了Java环境,将之前安装的java环境卸载 ...
memcached 学习
memcached 是什么特点协议简单基于 libevent 的事件处理内置内存存储方式 memcached 不互相通信的分布式启动安装依赖 libevent 安装命令下载地址在这个网 ...
HTML基础-------HTML标签(1)
HTML标签(1) h系列(容器级双标签) h系列标签分为六个等级(h1,h2,h3,h4,h5,h6) 语义:给文本添加一个标题标题重要程度逐级递减,一个页面只能有一个h1级的标签,并且大多数时候 ...
毕业设计(4):基于MicroPython的超声波倒车雷达系统
前言倒车雷达是汽车驻车或者倒车时的安全辅助装置,能以声音或者更为直观的显示告知驾驶员周围障碍物的情况,解除了驾驶员驻车.倒车和起动车辆时前后左右探视所引起的困扰,并帮助驾驶员扫除了视野死角和视线模糊 ...
5年后，我们为什么要从 Entity Framework 转到 Dapper 工具？
前言时间退回到 2009-09-26,为了演示开源项目 FineUI 的使用方法,我们发布了 AppBox(通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块),最初的 ...
easyui validatebox textbox 取值和赋值
总结:表单元素使用easyui时,textbox和validatebox设置值和获取值的方式不一样 text-box设置值只能使用id选择器选择表单元素,只能使用textbox("setVa ...
jeecg入门操作—菜单管理
一.菜单配置入口登录jeecg平台,点击系统管理->菜单管理,弹出菜单管理界面二.配置一级菜单点击菜单录入三.配置二级菜单选中生成的一级菜单,点击菜单录入四.菜单授权五.注销系 ...

BootstrapTable-导出数据

代码

结果

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

随机推荐

热门专题