layui+thinkphp6导出数据，前端显示进度条

要在前端显示导出进度条，可以使用layui的layer和jquery库来实现。在导出数据的过程中，可以通过计算已经导出的行数和总行数来计算出导出进度，并将其传递给前端页面。然后，利用ajax轮询的方式来获取导出进度，并更新进度条的显示。以下是示例代码： 1.前端页面代码： ```html <!-- 导出按钮 --> <button class="layui-btn layui-btn-normal" onclick="exportData()">导出数据</button> <!-- 进度条 --> <div class="layui-progress layui-progress-big" lay-showPercent="true" style="display:none; margin-top:15px;"> <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div> </div> <!-- 引入jquery和layui的layer库 --> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.1/layer.min.js"></script> <script> // 导出数据 function exportData() { // 显示进度条 $('.layui-progress').show(); // 发送ajax请求导出数据 $.ajax({ type: 'post', url: '/index/export', dataType: 'json', success: function(res) { // 隐藏进度条 $('.layui-progress').hide(); // 下载导出的文件 window.location.href = res.fileUrl; }, error: function() { // 隐藏进度条 $('.layui-progress').hide(); // 弹出错误提示 layer.msg('导出数据失败，请稍后重试！', {icon: 2}); } }); // 定时获取导出进度 var timer = setInterval(function() { $.ajax({ type: 'get', url: '/index/getExportProgress', dataType: 'json', success: function(res) { // 更新进度条显示 $('.layui-progress-bar').attr('lay-percent', res.progress + '%'); $('.layui-progress-bar').css('width', res.progress + '%'); // 导出完成，清除定时器 if (res.progress == 100) { clearInterval(timer); } } }); }, 1000); } </script> ``` 2.控制器代码： ```php // 导出数据 public function export() { try { // 省略从数据库中获取数据的代码 // ... // 获取总行数 $totalCount = count($data); // 初始化PHPExcel和PHPExcel_IOFactory require_once 'PHPExcel/PHPExcel.php'; require_once 'PHPExcel/IOFactory.php'; // 创建PHPExcel对象 $objPHPExcel = new PHPExcel(); // 创建第一个工作表 $sheet = $objPHPExcel->getActiveSheet(); // 省略将数据写入PHPExcel对象中的代码 // ... // 开始导出 ob_start(); $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); $objWriter->save('php://output'); $excelData = ob_get_clean(); // 生成导出文件名 $fileName = date('YmdHis') . '.xlsx'; $fileUrl = 'public/export/' . $fileName; // 保存导出文件 file_put_contents($fileUrl, $excelData); // 返回导出结果 return json([ 'fileUrl' => $fileUrl, ]); } catch (Exception $e) { // 导出数据失败，返回错误提示 return json([ 'code' => -1, 'msg' => '导出数据失败，请稍后重试！', ]); } } // 获取导出进度 public function getExportProgress() { // 获取当前导出进度 $progress = session('export_progress'); // 计算导出进度百分比 if ($progress['current'] == 0) { $percent = 0; } else { $percent = floor($progress['current'] / $progress['total'] * 100); } // 返回导出进度百分比 return json([ 'progress' => $percent, ]); } ``` 在以上代码中，我们利用ajax发送导出数据的请求，并在前端页面上显示进度条。然后，我们在控制器中逐行导出数据，并计算出导出进度，并将导出进度存储到session中。最后，我们通过ajax轮询的方式来获取导出进度，并更新进度条的显示。当导出完成时，我们返回导出结果并清除轮询定时器。