Jquery tableExcel.js下载地址:https://github.com/kayalshri/tableExport.jquery.plugin
tableExport.jquery.plugin导出的格式可以是:如下
JSON XML PNG CSV TXT SQL MS-Word Ms-Excel Ms-Powerpoint PDF
jquery Plugin(jquery插件添加)
<script type="text/javascript" src="tableExport.js">
<script type="text/javascript" src="jquery.base64.js">
PNG Export(导出png需要添加插件)
<script type="text/javascript" src="html2canvas.js">
PDF Export(导出PDF需要添加插件)
<script type="text/javascript" src="jspdf/libs/sprintf.js">
<script type="text/javascript" src="jspdf/jspdf.js">
<script type="text/javascript" src="jspdf/libs/base64.js">
Usage(用法)
οnclick="$('#tableID').tableExport({type:'excel',escape:false,fileName:'统计表'})"
Options(可选的属性)
separator: ','
ignoreColumn: [2,3],
tableName:'yourTableName'
type:'csv'
pdfFontSize:14
pdfLeftMargin:20
escape:'true'
htmlContent:'false'
consoleLog:'false'
实例代码
<!--实现导出Excel的功能 -->
<scripttype="text/javascript"src="./js/tableExport.js"></script>
<scripttype="text/javascript"src="./js/FileSaver.min.js"></script>
<scripttype="text/javascript"src="./js/jquery.base64.js"></script>
1.导出Excel
<inputonclick="export_excel()"id="btnExport1"type="submit"value="导出Excel">
<script type="text/javascript">
function export_excel(){
$('#table_1').tableExport({type:'excel', fileName: new Date().getTime(), escape:'false', ignoreColumn:'[5]'});
}
</script>
解析:
$("#table_1").tableExport({…});//获取到所指定的表,将其导出
即:$(表的id).tableExport({…});
type:'excel',//将表导出的格式,这边为excel,也可以为txt/pdf/json/xml等
fileName: new Date().getTime(),//设置导出的表的默认名称
escape:'false', //这边设置为false
ignoreColumn:'[5]'}//表示忽略列数,在这表示把第五列的数据给忽略掉,不在Excel中显示
2:导出带有样式的Excel
<input onclick="$('#table_1').tableExport({type:'excel', fileName: new Date().getTime(), escape:'false', ignoreColumn:'[3]', excelstyles: ['background-color', 'color', 'font-weight', 'border']});"id="btnExport2"type="submit"value="Export to Formatted MS-Excel">
3:导出txt
<input onclick="$('#table_1').tableExport({type:'txt', fileName: new Date().getTime(), escape:'false', ignoreColumn:'[3]', });"id="btnExport3"type="submit"value="Export to CSV">
<table id="table_1"class="table table-bordered table-hover"style="margin-top:20px;">
<thead>
<th style="width:120px;">编号</th>
<th style="width:220px;">账户名</th>
<th style="width:220px;">昵称</th>
<th style="width:150px;">创建时间</th>
<th style="width:150px;">负责人</th>
<th>操作</th>
</thead>
<tbody class="tbody"></tbody>
</table>
转载:https://blog.csdn.net/xingyuqihuan/article/details/79139778