PHP/HTML实现MySQL按日期筛选并导出Excel及加载条功能

我会分两部分帮你实现需求：首先是日期筛选功能，然后是导出时的加载进度提示。

一、添加日期筛选功能 #

1. 修改主页面（index.php） #

先引入jQuery UI组件用于日期选择，添加筛选表单并修改原有逻辑支持日期过滤，同时把筛选条件传递给导出接口：

<?php 
$connect = mysqli_connect("localhost", "root", "", "testing");
// 默认查询所有数据，若有日期参数则筛选
$date_filter = isset($_GET['start_date']) ? $_GET['start_date'] : '';
$sql = "SELECT * FROM tbl_customer";
if(!empty($date_filter)){
    // 用预处理语句防止SQL注入
    $sql .= " WHERE CREATED_AT >= ?";
    $stmt = mysqli_prepare($connect, $sql);
    mysqli_stmt_bind_param($stmt, "s", $date_filter);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
} else {
    $result = mysqli_query($connect, $sql);
}
?>
<html>
<head>
<title>Attempt to get data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- 引入jQuery UI样式 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- 引入jQuery UI脚本 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function() {
    // 初始化日期选择器，匹配MySQL日期格式
    $("#start_date").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true
    });

    // 处理日期筛选提交
    $("#filter_form").submit(function(e){
        e.preventDefault();
        var start_date = $("#start_date").val();
        window.location.href = "index.php?start_date=" + start_date;
    });

    // 导出时显示加载层
    $("#export_form").submit(function(){
        $("#loading-overlay").show();
    });
});
</script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h2 align="center">Export MySQL data to Excel in PHP</h2><br />

<!-- 日期筛选表单 -->
<form id="filter_form" class="form-inline mb-3">
    <div class="form-group">
        <label for="start_date">筛选日期（>=）：</label>
        <input type="text" id="start_date" class="form-control" value="<?php echo $date_filter; ?>" placeholder="选择日期">
    </div>
    <button type="submit" class="btn btn-primary">筛选</button>
</form>

<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Created At</th> <!-- 新增显示创建时间字段 -->
</tr>
<?php while($row = mysqli_fetch_array($result)) { echo '
<tr>
<td>'.$row["CustomerName"].'</td>
<td>'.$row["Address"].'</td>
<td>'.$row["City"].'</td>
<td>'.$row["PostalCode"].'</td>
<td>'.$row["Country"].'</td>
<td>'.$row["CREATED_AT"].'</td>
</tr>
'; } ?>
</table>
<br />
<!-- 修改导出表单，携带日期筛选参数 -->
<form method="post" action="export.php" id="export_form">
    <input type="hidden" name="start_date" value="<?php echo $date_filter; ?>">
    <input type="submit" name="export" class="btn btn-success" value="Export" />
</form>

<!-- 加载进度层 -->
<div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-size:18px; text-align:center;">
        <div class="spinner-border text-light" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <p class="mt-2">正在导出数据，请稍候...</p>
    </div>
</div>
</div>
</div>
</body>
</html>

2. 修改export.php，支持带日期筛选的导出 #

接收主页面传递的日期参数，同样用预处理语句保证查询安全：

<?php //export.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
if(isset($_POST["export"])) {
    $date_filter = isset($_POST['start_date']) ? $_POST['start_date'] : '';
    $query = "SELECT * FROM tbl_customer";
    if(!empty($date_filter)){
        $query .= " WHERE CREATED_AT >= ?";
        $stmt = mysqli_prepare($connect, $query);
        mysqli_stmt_bind_param($stmt, "s", $date_filter);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
    } else {
        $result = mysqli_query($connect, $query);
    }

    if(mysqli_num_rows($result) > 0) {
        $output .= '
        <table class="table" bordered="1">
        <tr>
        <th>Name</th>
        <th>Address</th>
        <th>City</th>
        <th>Postal Code</th>
        <th>Country</th>
        <th>Created At</th>
        </tr>
        ';
        while($row = mysqli_fetch_array($result)) {
            $output .= '
            <tr>
            <td>'.$row["CustomerName"].'</td>
            <td>'.$row["Address"].'</td>
            <td>'.$row["City"].'</td>
            <td>'.$row["PostalCode"].'</td>
            <td>'.$row["Country"].'</td>
            <td>'.$row["CREATED_AT"].'</td>
            </tr>
            ';
        }
        $output .= '</table>';
        header('Content-Type: application/xls');
        header('Content-Disposition: attachment; filename=download.xls');
        echo $output;
    }
}
?>

二、导出加载进度条说明 #

主页面中已经添加了全屏半透明的加载层，通过jQuery监听导出表单的提交事件，点击Export按钮后立即显示加载层，直到浏览器开始下载文件。这个加载层使用Bootstrap的spinner组件，视觉上更友好，让用户明确知道系统正在处理请求。

关键注意事项： #

1. SQL注入防护：全程使用mysqli预处理语句处理用户输入的日期参数，避免直接拼接SQL字符串带来的安全风险。
2. 日期格式兼容：将jQuery UI日期选择器的格式设置为yy-mm-dd，和MySQL的DATE/DATETIME字段格式保持一致，确保筛选逻辑准确。
3. 用户体验优化：加载层使用fixed定位覆盖整个页面，防止用户重复点击按钮，同时清晰提示处理状态。

内容的提问来源于stack exchange，提问作者user8007135