我有一個 html/jquery/bootstrap 的代碼。我無法添加匯出按鈕,它將下載表格格式的資料。如何添加以 csv 和 excel 格式下載資料的匯出按鈕?
下面是代碼
<html>
<head>
<!-- Favicon -->
<!--link rel="shortcut icon" href="{{url_for('static', filename='images/favicon.ico')}}"-->
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type = "text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type = "text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- Datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type = "text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type = "text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
<form method="post">
<!-- <textarea rows="5" name="user_csv"></textarea>-->
<button class="btn btn-success mt-2">Show output data</button>
</form>
<div class="mt-4">
{% if request.method == 'POST'%}
<table id="proxies" class="display table nowrap responsive" style="width: 100%">
<thead>
<tr>
{% for header in results[0].keys() %}
<th>{{header}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in results %}
<tr>
{% for index in range(0, len(fieldnames)) %}
<td>{{row[fieldnames[index]]}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('#proxies').DataTable();
</script>
</html>
如何添加以 csv 和 excel 格式下載資料的匯出按鈕?
uj5u.com熱心網友回復:
嘗試在腳本中添加以下代碼。
作業示例可以在這里找到!
$('#proxies').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/466400.html
