在 Jquery 中导出数据表时重命名 excel 文件

Question

我正在使用 jQuery DataTables. I added Export to Excel button。单击时，将出现提示并要求您输入文件名。

filename: function () { 
var txt = prompt("Enter the filename :");
return txt; }

它工作正常，但我想使用 SweetAlert input，因为它在视觉上看起来更好。问题是出现了提示，但在用户键入文件名之前文件已导出。

swal("Enter the filename :", {
  content: "input",
})
.then((value) => {
  return value;
});

我在输入文件名后直接返回输入值。请问我的代码中缺少什么建议？非常感谢。

$(document).ready(function() {

var table = $('#example').DataTable( {
"dom": 'Btri',
"searching" : false,
"paging" : false,
"info" : false,
buttons: [ {
extend: 'excelHtml5',
className: 'btn btn-primary btn-sm',
text: 'Export',
autoFilter: true,
attr:  { id: 'exportButton' },
sheetName: 'data',
title: '',
filename: function () { 
//var txt = prompt("Enter the filename :");
//return txt; 
swal("Enter the filename :", {
  content: "input",
})
.then((value) => {
  return value;
});
}
}]

} );

  
        
} );

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>


<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
           <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>0,750</td>
            </tr>
        </tbody>
    </table>

Answer 1

一个简单的解决方法是向按钮添加 mousedown 事件。

$(document).on('mousedown', '#exportButton', function(e) {
    swal("Enter the filename :", {
        content: "input",
    }).then(function (value) {
        if (value.trim().length > 0)
            $('#exportButton').data('filename', value).trigger('click');
    });
})
var table = $('#example').DataTable({
    "dom": 'Btri',
    "searching": false,
    "paging": false,
    "info": false,
    buttons: [{
        extend: 'excelHtml5',
        className: 'btn btn-primary btn-sm',
        text: 'Export',
        autoFilter: true,
        attr: {id: 'exportButton'},
        sheetName: 'data',
        title: '',
        filename: function ( ) {
            return $('#exportButton').data('filename');
        }
    }]
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>




<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>0,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>0,750</td>
    </tr>
    </tbody>
</table>

在 Jquery 中导出数据表时重命名 excel 文件

Rename excel file when exporting a datatable in Jquery

javascript

jquery

datatables

sweetalert