基于jQuery的前端导出插件tableExport,导出成xlsx, xls, csv, txt文件示例

基于jQuery的前端导出插件tableExport,导出成xlsx, xls, csv, txt文件示例
tableExport是一款可将前端HTML table数据导出成 xlsx, xls, csv和 txt文件格式的jQuery插件,支持Bootstrap,支持自定义,简单易用。本文将简单介绍如何使用tableExport并提供该插件导出数据示例。

入门指南

使用教程

1、引入依赖

<link href="js/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="js/tableexport/dist/css/tableexport.css" rel="stylesheet" type="text/css">
<script src="js/jquery/3.3.1/jquery.min.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/Blob.min.js"></script>
<script src="js/xls.core.min.js"></script>
<script src="js/tableexport/dist/js/tableexport.min.js"></script>

2、HTML表格

<table class="table table-striped table-bordered" data-name="cool-table">
    <thead>
        <tr>
            <th>水果排名</th>
            <th>水果名称</th>
            <th>数量</th>
            <th>百分比</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>橙子</td>
            <td>1,370,000个</td>
            <td>28.9%</td>
        </tr>
        <tr>
            <td>2</td>
            <td>苹果</td>
            <td>1,273,000个</td>
            <td>17.6%</td>
        </tr>
        <tr>
            <td>3</td>
            <td>香蕉</td>
            <td>321,000个</td>
            <td>16.43%</td>
        </tr>
        <tr>
            <td>4</td>
            <td>猕猴桃</td>
            <td>255,610,70个</td>
            <td>21.52%</td>
        </tr>
        <tr>
            <td>5</td>
            <td>西瓜</td>
            <td>204,503,000</td>
            <td>19.82%</td>
        </tr>
        <tr>
            <td>6</td>
            <td>哈密瓜</td>
            <td>190,56,0个</td>
            <td>28.62%</td>
        </tr>
    <tbody>
</table>

3、Javascript脚本初始化

//自定义导出按钮显示文字,全局方式
TableExport.prototype.formatConfig.xlsx.buttonContent = "导出成xlsx";
TableExport.prototype.formatConfig.xls.buttonContent = "导出成xls";
TableExport.prototype.formatConfig.csv.buttonContent = "导出成csv";
TableExport.prototype.formatConfig.txt.buttonContent = "导出成txt";
//初始化
$("table").tableExport({
    formats: ["xlsx","xls", "csv", "txt"], //定义可导出文件格式
    filename:"水果库存", //导出文件名称
    bootstrap:true  //设置支持bootstrap样式
});

这样就完成了tableexport将table数据导出成xlsx,xls,csv,txt文件的示例。

the end