bootstrapTable的使用及表格的导出
https://www.pudn.com/news/6278bf1977d3727348162d84.html
代码：bootstrap: bootstrap的使用示例、包括bootstrapTable、bootstrapTable表格的导出
运行环境：JDK8
前台页面：bootstrapTable.html
后台代码：BootStrapController.java
一、下载bootstrapTable插件
1.1 百度搜索 bootstraptable
1.1.1选择进入
后会自动跳转到Bootstrap Table · An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)，点击下载按钮
1.1.2 选择从github上clone，git地址：GitHub - wenzhixin/bootstrap-table: An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
二、bootstrapTable的使用
2.1 导入bootstrapTable的JS和CSS
将 git下载下来的bootstrap-table-master.zip解压，到dist目录下，找到以下几个文件加入到项目的静态文件夹下，需要注意的是需要加入locale文件夹下的语言JS文件。本项目是将JS和CSS放到bootstrap-table文件夹下。
2.2 在html页面引入 bootstrap-table 的css、js
<!--bootstrap-table-->
<link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>2.3 在html的body里加入标签
<H2 align="center">bootstrapTable表格页面</H2>
<hr/>
<div class="container-fluid">
<div id ="toolbar">
<form class="form-inline" role="form" style="margin-left: 10px">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="phone">手机号码：</label>
<input type="text" id="phone" class="form-control" placeholder="请输入手机号码">
</div>
<div class="form-group">
<select id="selectExportDataType" class="form-control">
<option value="basic">导出当前页</option>
<option value="selected">导出所选数据</option>
<option value="all">导出所有数据</option>
</select>
</div>
<button onclick="query()" class="btn btn-default" style="color: #ffffff"><span class="glyphicon glyphicon-search"></span> 查询</button>
<button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
</form>
</div>
<div>
<table id="table"></table>
</div>
</div>2.4 JS代码
<script>
// 初始化表格
function initTable(exportScope) {
$('#table').bootstrapTable({
//请求后台的URL（*）
url: 'queryTableList',
//请求方式（*）
method: 'GET',
//请求数据的格式
dataType: "json",
//工具按钮用哪个容器
// toolbar: '#toolbar',
//是否显示行间隔色
striped: true,
//当数据为 undefined 时显示的字符
undefinedText: "无",
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: true,
//排序方式（desc，asc）
sortOrder: "asc",
//分页方式：client客户端分页，server服务端分页（*）
// sidePagination: "server",
sidePagination: "client",
//初始化加载第一页，默认第一页,并记录
pageNumber: 1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*） 当记录条数大于最小可选择条数时才会出现
pageList: [10, 20, 50, 100],
paginationPreText: '上一页',
paginationNextText: '下一页',
//是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框
search: false,
// search: true,
strictSearch: true,
//是否显示所有的列（选择显示的列）
showColumns: true,
//是否显示刷新按钮
showRefresh: true,
//最少允许的列数
minimumCountColumns: 2,
//单击选中列表
clickToSelect: true,
//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
//height: 500,
//每一行的唯一标识，一般为主键列
uniqueId: "id",
//是否显示 切换试图（table/card）按钮
showToggle: true,
//是否显示详细视图
cardView: false,
//是否显示父子表
detailView: false,
//是否导出数据
showExport: true,
Icons : 'glyphicon-export icon-share',
//选择导出数据的范围，默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据
exportDataType: exportScope,
//导出文件类型,因为导出png文件时会出现忽略的列也显示；导出PDF文件出现中文乱码的问题，所以根据需要只支持Excel文件类型即可
//['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'pdf']
exportTypes: ['excel'],
// Icons:'glyphicon-export',
// export: 'glyphicon-export icon-share',
//导出设置
exportOptions: {
ignoreColumn: [0,11], //忽略某一列的索引
worksheetName: 'sheet1', //表格工作区名称
// tableName: '总台帐报表',
//导出文件的名称
fileName: 'bootstrapTable表格数据',
},
//得到查询的参数
queryParams : function (params) {
debugger;
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
name: $('#name').val(),
phone : $('#phone').val(),
// pageSize: params.limit, //页面大小
pageSize: 10, //页面大小
// pageNumber: (params.offset / params.limit) + 1, //页码
pageNumber: 1, //页码
sortOrder: params.order //排序方式（desc，asc）
};
return temp;
},
columns: [{
checkbox: true,
visible: true //是否显示复选框
// visible: $(this).val() === 'selected'
}, {
field: 'name',
title: '姓名',
sortable: true
}, {
field: 'phone',
title: '手机号码',
sortable: true
}, {
field: 'email',
title: '邮箱',
sortable: true,
formatter: emailFormatter
}, {
field: 'homePage',
title: '主页',
formatter: linkFormatter
}, {
field: 'hobby',
title: '兴趣爱好'
}, {
field: 'gender',
title: '性别',
sortable: true,
formatter:sexFormatter
}, {
field: 'age',
title: '年龄'
}, {
field: 'birthDate',
title: '出生日期'
}, {
field: 'height',
title: '身高'
}, {
field: 'note',
title: '备注'
}, {
field:'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
alert("数据加载失败！");
},
//双击行数据的事件
onDblClickRow: function (row, $element) {
// var id = row.ID;
// EditViewById(id, 'view');
},
});
}
//连接字段格式化
function linkFormatter(value, row, index) {
return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";
}
//Email字段格式化
function emailFormatter(value, row, index) {
return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";
}
//性别字段格式化
function sexFormatter(value) {
var sex = "";
if (value === "0") {
color = 'Red';
sex = "女";
}
else if (value === "1") {
color = 'Green';
sex = "男";
}
else {
color = 'Yellow';
}
return '<div style="color: ' + color + '">' + sex + '</div>';
}
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
$(function () {
//调用函数，初始化表格,导出时默认导出全部
initTable('all');
});
function query(){
initTable('all');
}
// 自定义按钮导出数据
function exportData(){
//选择导出的数据类型
var dataType = $('#selectExportDataType').val();
initTable(dataType);
// debugger;
// $('#table').tableExport({
// type: 'excel',
// // One of 'head', 'data', 'all'
// jsonScope: 'all',
// //忽略某一列的索引
// ignoreColumn: [0,11],
// //表格工作区名称
// worksheetName: 'sheet1',
// //下载文件名称
// fileName: '自定义导出数据',
// //处理导出内容,自定义某一行、某一列、某个单元格的内容
// onCellHtmlData: function (cell, row, col, data){
// // console.info(data);
// return data;
// },
// });
}
</script>2.5完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap使用</title>
<!--jquery-->
<script type="text/javascript" src="/jquery/jquery-3.5.1.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--bootstrap-table-->
<link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- bootstrap-table表格 -->
<!--bootstrap-table-export-->
<script src="/bootstrap-table-export/bootstrap-table-export.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/export/bootstrap-table-export.js"></script>-->
<!--在客户端保存生成的导出文件-->
<script src="/bootstrap-table-export/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="/bootstrap-table-export/xlsx.core.min.js"></script>
<!--将表导出为PDF文件-->
<script src="/bootstrap-table-export/jspdf.min.js"></script>
<script src="/bootstrap-table-export/jspdf.plugin.autotable.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="/bootstrap-table-export/es6-promise.auto.min.js"></script>
<script src="/bootstrap-table-export/html2canvas.min.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="/bootstrap-table-export/tableExport.min.js"></script>
</head>
<body>
<H2 align="center">bootstrapTable表格页面</H2>
<hr/>
<div class="container-fluid">
<div id ="toolbar">
<form class="form-inline" role="form" style="margin-left: 10px">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="phone">手机号码：</label>
<input type="text" id="phone" class="form-control" placeholder="请输入手机号码">
</div>
<div class="form-group">
<select id="selectExportDataType" class="form-control">
<option value="basic">导出当前页</option>
<option value="selected">导出所选数据</option>
<option value="all">导出所有数据</option>
</select>
</div>
<button onclick="query()" class="btn btn-default" style="color: #ffffff"><span class="glyphicon glyphicon-search"></span> 查询</button>
<button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
</form>
</div>
<div>
<table id="table"></table>
</div>
</div>
</body>
<script>
// 初始化表格
function initTable(exportScope) {
$('#table').bootstrapTable({
//请求后台的URL（*）
url: 'queryTableList',
//请求方式（*）
method: 'GET',
//请求数据的格式
dataType: "json",
//工具按钮用哪个容器
// toolbar: '#toolbar',
//是否显示行间隔色
striped: true,
//当数据为 undefined 时显示的字符
undefinedText: "无",
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: true,
//排序方式（desc，asc）
sortOrder: "asc",
//分页方式：client客户端分页，server服务端分页（*）
// sidePagination: "server",
sidePagination: "client",
//初始化加载第一页，默认第一页,并记录
pageNumber: 1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*） 当记录条数大于最小可选择条数时才会出现
pageList: [10, 20, 50, 100],
paginationPreText: '上一页',
paginationNextText: '下一页',
//是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框
search: false,
// search: true,
strictSearch: true,
//是否显示所有的列（选择显示的列）
showColumns: true,
//是否显示刷新按钮
showRefresh: true,
//最少允许的列数
minimumCountColumns: 2,
//单击选中列表
clickToSelect: true,
//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
//height: 500,
//每一行的唯一标识，一般为主键列
uniqueId: "id",
//是否显示 切换试图（table/card）按钮
showToggle: true,
//是否显示详细视图
cardView: false,
//是否显示父子表
detailView: false,
//是否导出数据
showExport: true,
Icons : 'glyphicon-export icon-share',
//选择导出数据的范围，默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据
exportDataType: exportScope,
//导出文件类型,因为导出png文件时会出现忽略的列也显示；导出PDF文件出现中文乱码的问题，所以根据需要只支持Excel文件类型即可
//['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'pdf']
exportTypes: ['excel'],
// Icons:'glyphicon-export',
// export: 'glyphicon-export icon-share',
//导出设置
exportOptions: {
ignoreColumn: [0,11], //忽略某一列的索引
worksheetName: 'sheet1', //表格工作区名称
// tableName: '总台帐报表',
//导出文件的名称
fileName: 'bootstrapTable表格数据',
},
//得到查询的参数
queryParams : function (params) {
debugger;
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = {
name: $('#name').val(),
phone : $('#phone').val(),
// pageSize: params.limit, //页面大小
pageSize: 10, //页面大小
// pageNumber: (params.offset / params.limit) + 1, //页码
pageNumber: 1, //页码
sortOrder: params.order //排序方式（desc，asc）
};
return temp;
},
columns: [{
checkbox: true,
visible: true //是否显示复选框
// visible: $(this).val() === 'selected'
}, {
field: 'name',
title: '姓名',
sortable: true
}, {
field: 'phone',
title: '手机号码',
sortable: true
}, {
field: 'email',
title: '邮箱',
sortable: true,
formatter: emailFormatter
}, {
field: 'homePage',
title: '主页',
formatter: linkFormatter
}, {
field: 'hobby',
title: '兴趣爱好'
}, {
field: 'gender',
title: '性别',
sortable: true,
formatter:sexFormatter
}, {
field: 'age',
title: '年龄'
}, {
field: 'birthDate',
title: '出生日期'
}, {
field: 'height',
title: '身高'
}, {
field: 'note',
title: '备注'
}, {
field:'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
alert("数据加载失败！");
},
//双击行数据的事件
onDblClickRow: function (row, $element) {
// var id = row.ID;
// EditViewById(id, 'view');
},
});
}
//连接字段格式化
function linkFormatter(value, row, index) {
return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";
}
//Email字段格式化
function emailFormatter(value, row, index) {
return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";
}
//性别字段格式化
function sexFormatter(value) {
var sex = "";
if (value === "0") {
color = 'Red';
sex = "女";
}
else if (value === "1") {
color = 'Green';
sex = "男";
}
else {
color = 'Yellow';
}
return '<div style="color: ' + color + '">' + sex + '</div>';
}
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
$(function () {
//调用函数，初始化表格,导出时默认导出全部
initTable('all');
});
function query(){
initTable('all');
}
// 自定义按钮导出数据
function exportData(){
//选择导出的数据类型
var dataType = $('#selectExportDataType').val();
initTable(dataType);
// debugger;
// $('#table').tableExport({
// type: 'excel',
// // One of 'head', 'data', 'all'
// jsonScope: 'all',
// //忽略某一列的索引
// ignoreColumn: [0,11],
// //表格工作区名称
// worksheetName: 'sheet1',
// //下载文件名称
// fileName: '自定义导出数据',
// //处理导出内容,自定义某一行、某一列、某个单元格的内容
// onCellHtmlData: function (cell, row, col, data){
// // console.info(data);
// return data;
// },
// });
}
</script>
</html>2.6 后台完整代码：
package com.example.bootstrap.controller;
import com.example.bootstrap.entity.PageHelper;
import com.example.bootstrap.entity.UserDO;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
@Controller
public class BootStrapController {
@Autowired
private ObjectMapper objectMapper;
@GetMapping("/queryTableList")
@ResponseBody
public String queryTableList(UserDO userDO, HttpServletRequest request) throws JsonProcessingException {
PageHelper<UserDO> pageHelper = new PageHelper<UserDO>();
System.out.println("userDO: " + userDO);
// 统计总记录数
// Integer total = consumerRecordService.getTotal(consumeRecord);
pageHelper.setTotal(15);
// 查询当前页实体对象
List<UserDO> list = new ArrayList<>();
for(int i = 0; i < 1500; i ++){
int num = i + 1;
String index = ((Integer)num).toString();
UserDO userDO1 = new UserDO();
userDO1.setName("哈哈哈");
userDO1.setPhone(index);
userDO1.setEmail("569@qq.com");
userDO1.setHomePage("xxx.xxx.xx");
userDO1.setHobby("睡觉");
userDO1.setGender("1");
userDO1.setAge("2222");
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
userDO1.setBirthDate(sdf.format(date));
userDO1.setHeight(index +"cm");
userDO1.setNote("记笔记");
list.add(userDO1);
}
pageHelper.setRows(list);
return objectMapper.writeValueAsString(pageHelper);
}
}
三、讲解（主要讲解bootstrap表格相关JS的使用过程中遇到的问题)：
3.1 bootstrap-table.js或 bootstrap-table.min.js构建表格时各特别属性的介绍：
（1）toolbar: '#toolbar'：一般是将搜索栏绑定到表格上，这样在样式上会各表格显得一体。
有toolbar：的样式
无toolbar：的样式
（2）sidePagination："client"或 "server"：
分页方式：client客户端分页，server服务端分页（*）
client客户端分页：如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；
server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；
不建议使用客户端分页，当数据量较大时耗时较长！
（3）search: false
是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，最好使用自定义查询搜索功能。
（4）
showRefresh: true：是否显示刷新按钮
showToggle: true：是否显示 切换试图（table/card）按钮
showColumns: true 是否显示所有的列（选择显示的列）
（5）bootstrap表格导出的设置
//是否导出数据
showExport: true,
Icons : 'glyphicon-export icon-share',
//选择导出数据的范围，默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据
exportDataType: exportScope,
//导出文件类型,因为导出png文件时会出现忽略的列也显示；导出PDF文件出现中文乱码的问题，所以根据需要只支持Excel文件类型即可
//['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'pdf']
exportTypes: ['excel'],
// Icons:'glyphicon-export',
// export: 'glyphicon-export icon-share',
//导出设置
exportOptions: {
ignoreColumn: [0,11], //忽略某一列的索引
worksheetName: 'sheet1', //表格工作区名称
// tableName: '总台帐报表',
//导出文件的名称
fileName: 'bootstrapTable表格数据',
},exportDataType：这里我改成了动态的，是因为tableExport.min.js里没有exportDataType属性，不能自定义一个单独的导出本页、选择的数据或全部数据的方法。
还需要加入相关导出的JS：JS的下载地址 ：https://github.com/hhurz/tableExport.jquery.plugin
<!-- bootstrap-table表格 -->
<!--bootstrap-table-export-->
<script src="/bootstrap-table-export/bootstrap-table-export.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/export/bootstrap-table-export.js"></script>-->
<!--在客户端保存生成的导出文件-->
<script src="/bootstrap-table-export/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="/bootstrap-table-export/xlsx.core.min.js"></script>
<!--将表导出为PDF文件-->
<script src="/bootstrap-table-export/jspdf.min.js"></script>
<script src="/bootstrap-table-export/jspdf.plugin.autotable.js"></script>
<!--以PNG格式导出表格-->
<!--对于IE支持包括 html2canvas 之前的 es6-promise-->
<script src="/bootstrap-table-export/es6-promise.auto.min.js"></script>
<script src="/bootstrap-table-export/html2canvas.min.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="/bootstrap-table-export/tableExport.min.js"></script>这里需要特别说明的是bootstrap-table-export.js的选择下载：不同版本的在与bootstrap-table.min.js兼容上会有些问题，主要是导出按钮可能不显示。，所以这里下载的bootstrap-table-export.js是来自
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/export/bootstrap-table-export.js
（6）如果还想以不同类型的文件导出，则需要加入（5）中引入的JS，注意各JS的引入顺序，如图所示即可。
bootstrapTable的使用及表格的导出的更多相关文章
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- 将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- PowerDesigner 创建表格及导出SQL语句
PowerDesigner 创建表格及导出SQL语句 目的:提高数据库创建表格效率 测试数据库:orcale 1.新建物理模型. 右键点击workplace,new一个物理模型并指定数据库. 2. ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- java的excel表格的导出与下载
今天做一个java对excel表格的导出和下载的时候,从网络上搜寻了下载的模板,代码如下: 控制层: @RequestMapping(value = "excelOut_identifier ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- 前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...
- jsp表格数据导出到Execl
1.关于“下载” 需要设置页面header的一个属性为:Content-Disposition: attachment; filename=下载的文件.txt 如: <a href=" ...
- 使用Aspose插件将程序中的表格，导出生成excel表格
http://www.cnblogs.com/lanyue52011/p/3372452.html这个是原文地址 /// <summary> /// 点击按钮,将内存表导出excel表格! ...
- bootstrap-table对前台页面表格的支持
1.bootstrap-table是在bootstrap的基础上面做了一些封装,所以在使用bootstrap-table之前要导入的js和css有 1)基本的还是jQuery <script t ...
随机推荐
- JavaScript入门笔记day2
文章目录 常用互动方法 1. document.write() 直接向页面输出内容 2. `alert();`弹出消息对话框 3. confirm消息对话框 4. prompt弹出消息对话框,用于需要 ...
- openjdk8下载地址（附赠）
openjdk下载地址:https://jdk.java.net/ (文末已经为大家下好了,放在网盘里) 进去后点8,win. 安装好后,使用java -version命令如下: 成功安装openjd ...
- Linux Shell整理小知识
Linux Shell整理小知识 介绍两个命令 1. shopt shell option, 即shell的一些选项设置 [root@localhost ~]# shopt autocd off cd ...
- 洛谷题解：P12364 [蓝桥杯 2022 省 Python B] 寻找整数
注:可以在两分钟内跑出. 看到这题,暴力枚举跑不出来.如果你有没有充分的数学知识,那又怎么办呢? 减少枚举量 首先,注意到许多余数都是 \(11\),有图为证: 设这个数为 \(n\),则有: \[n ...
- AI工具 Cursor + MCP服务：提效与落地的完美组合
在当今软件开发快速演进的时代,开发者们越来越依赖于人工智能辅助工具来提升效率与质量.最近我在实际项目中深度使用了 Cursor 编辑器 和 MCP(Model Context Protocol)服务, ...
- Mac 终端下svn常用命令的使用
svn基本的操作流程 刚刚进入一个新的公司,让我接手一个正在进行的项目,我打开终端写下了:svn co svn://192.168.1.1/pro/domain 然后就可以在当前目录里面找到一个叫do ...
- 跨平台之 KMP / KMM 详解
任何事情,急于求成都是幼稚的幻想,急于求成的结果一定是不成,对此不应该有任何怀疑. 一. KMP 和 Compose Multiplatform 摘要:减少为不同平台编写和维护相同业务逻辑代码所花费的 ...
- P5995 [PA2014] Lustra
提供一种极易理解的纯模拟做法. 虽然时空都不是很优秀,但是距离时空超限还绰绰有余.并且没有运用什么深奥的算法与技巧,非常适合算法初学者,并且还留有极大的优化空间. 理解题意,题目要求我们求出是否有工厂 ...
- ChatMoney，你的就业指导明灯
本文由 ChatMoney团队出品 介绍说明 Hey!亲爱的小伙伴们,今天我要给大家带来一个职场利器--AI就业指导机器人! 在这个充满变数的职场江湖,找到一份既能养家糊口又能实现自我价值的工作是多么 ...
- 使用 SpringBoot 集成 WebService [需要身份验证]
使用 JDK 自带的 wsimport 工具生成实体类 1.1 创建身份验证文件(用于 Webservice 身份验证-auth.txt # 格式 http://账号:密码@wsdl地址 # 案例 h ...