js 基于bootstrap导出表格数据到excel

基于bootstrap的导出表格数据到excel心得

如果有码友意外发现了我这文章和你出现了相同问题，那麻烦你赶紧给我点个赞分享一下，谢谢！好了，进入主题—

重要说明！！！

本js功能实现是基于bootstrap的modal模态框和bootstrap-table表格插件实现的，在Chrome和360浏览器上完美运行，但是ie和其他浏览器并无测试，有问题可以提出来，欢迎加入讨论！

先上效果图： 额，开玩笑的，我们公司是内网电脑，我并无法截图发到外网；还是手动代码说明吧，各位看官辛苦一下,还是一步一步说明吧

1. 在相关页面上引入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"/>

2. 我这里是定义了一个弹窗（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