基于bootstrap的导出表格数据到excel心得
如果有码友意外发现了我这文章和你出现了相同问题,那麻烦你赶紧给我点个赞分享一下,谢谢!好了,进入主题—
重要说明!!!
本js功能实现是基于bootstrap的modal模态框和bootstrap-table表格插件实现的,在Chrome和360浏览器上完美运行,但是ie和其他浏览器并无测试,有问题可以提出来,欢迎加入讨论!
先上效果图: 额,开玩笑的,我们公司是内网电脑,我并无法截图发到外网;还是手动代码说明吧,各位看官辛苦一下,还是一步一步说明吧
- 在相关页面上引入bootstrap.min.js、bootstrap.min.css、bootstrap-table.min.js、bootstrap-table.min.css文件(Vue的话自行参看官网如何配置)
//xx对应哪个路径下
<link href="xx/bootstrap.min.css" rel="stylesheet"/>
<link href="xx/bootstrap-table.min.css" rel="stylesheet"/>
<script src="xx/bootstrap.min.js"/>
<script src="xx/jQuery.js"/>
<script src="xx/bootstrap-table.min.js"/>
- 我这里是定义了一个弹窗(modal模态框)来加载table数据,其中这个table表格的存在是必需的,因为它定义了你传进来的数据格式
//xx对应哪个路径下
<div id="modal-id" class="modal hide fade in" style="display: none; " tabindex="-1" role="dialog" aria-labelledby="aria-name" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>这是一个模态框标题</h3>
</div>
<div class="modal-body">
<h4>模态框中的文本</h4>
<p>你可以在这添加一些文本。</p>
//简单的一个表格,这个table表格的存在是必需的,因为它定义了你传进来的数据格式,
<table id="table-id" class="table-class">
<thead>
<th data-field="id">id</th>
<th data-field="name">xingming</th>
<th data-field="cantent">neirong</th>
</thead>
</table>
</div