十七 bootstrap-table tableExport 导出xlsx格式表格

简介: 原文:十七 bootstrap-table tableExport 导出xlsx格式表格 在[十六、bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示窗 那么,导出xlsx格式的应该就没问题了吧?!实验如下,查找tableExport.js资料 TableExport插件依赖于jQuery(1.2.1+),FileSaver.js。
原文: 十七 bootstrap-table tableExport 导出xlsx格式表格

在[十六、bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示窗
这里写图片描述

那么,导出xlsx格式的应该就没问题了吧?!实验如下,查找tableExport.js资料

TableExport插件依赖于jQuery(1.2.1+),FileSaver.js。为了支持.xlsx(Office Open XML SpreadsheetML Format)格式,你必须在 FileSaver.js 和 TableExport.js文件之前引入xlsx-core.js文件。为了使旧的浏览器(Firefox < 20, Opera < 15, Safari < 6)支持.xlsx,需要在 FileSaver.js 文件之前引入 Blob.js文件。

1.从https://github.com/SheetJS/js-xlsx上下载xlsx.full.min.js,放到static路径下:
这里写图片描述

2.在html中添加:
<script type="text/javascript" src="/static/js/xlsx.full.min.js"></script>

3.js中修改:

exportTypes: ['xls','xlsx', 'txt', 'csv'], //可选的导出文件类型

4.导出效果
这里写图片描述

这里写图片描述

参考文档:
可将HTML表格导出为Excel|csv|txt文件的jQuery插件 http://www.htmleaf.com/jQuery/Table/201605113452.html

目录
相关文章
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
111 1
Bootstrap5 表格1
Bootstrap5 的基础表格通过添加 `.table` 类来设置样式。
Bootstrap5 表格5
使用 `.table-dark` 类可以为表格添加黑色背景,使表格在页面中更加突出。
Bootstrap5 表格7
通过结合使用 `.table-dark` 和 `.table-hover` 类,可以创建一个具有鼠标悬停效果的黑色背景表格。示例表格包含姓名和电子邮件信息,当鼠标悬停在行上时,行会高亮显示。
Bootstrap5 表格6
通过结合使用 `.table-dark` 和 `.table-striped` 类,可以创建一个具有黑色背景和条纹效果的表格。示例表格包含三列:名字、姓氏和电子邮件,并展示了三位用户的信息。
Bootstrap5 表格3
使用 `.table-bordered` 类可为表格添加边框,使表格结构更清晰。示例中,表格包含三列:名字、姓氏和邮箱,展示了三位用户的信息。
|
2月前
|
NoSQL
Bootstrap5 表格12
使用 .table-responsive 类可以创建响应式表格。当屏幕宽度小于 992px 时,表格会出现水平滚动条;当屏幕宽度大于 992px 时,表格正常显示,没有滚动条。示例代码展示了如何实现这一效果。
Bootstrap5 表格11
使用 `.table-sm` 类可以创建一个内边距较小的紧凑型表格。
Bootstrap5 表格10
可以通过添加 `.table-dark` 或 `.table-light` 类来设置表格表头的背景颜色。`.table-dark` 使表头背景变为黑色,而 `.table-light` 则使其变为灰色。示例代码展示了这两种效果的应用。
Bootstrap5 表格9
通过指定意义的颜色类(如 `table-primary`、`table-success` 等),可以为表格的行或单元格设置不同的背景颜色,以突出显示特定信息。示例中展示了多种颜色类的应用效果。