jQuery AJAX POST 方式下载 Excel 文件：让下载更轻松

前端

2023-04-19 03:05:54

使用 jQuery AJAX POST 方式无忧下载 Excel 文件

作为开发人员，我们需要经常从服务器获取各种文件，例如 Excel 文件。传统方法涉及在 HTML 页面中添加<a>标签或<form>表单，但这可能很麻烦，需要额外的代码、缺乏进度控制和安全性较差。

jQuery AJAX POST 方式的优势

jQuery AJAX POST 方式提供了以下优势：

简化开发，无需额外 HTML 代码
精准控制下载进度，提升用户体验
增强安全性，防止跨站请求伪造 (CSRF) 攻击

操作步骤

1. 准备工作

引用 jQuery 库
创建 HTML 文件，包含下载按钮和 jQuery 脚本

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="download-btn">下载 Excel 文件</button>

  <script>
    $(document).ready(function() {
      $("#download-btn").click(function() {
        $.ajax({
          url: "download.php",
          method: "POST",
          data: { filename: "data.xlsx" },
          xhrFields: {
            responseType: 'blob'
          },
          success: function(data) {
            var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            saveAs(blob, "data.xlsx");
          },
          error: function() {
            alert("下载失败，请重试！");
          }
        });
      });
    });
  </script>
</body>
</html>

2. 服务器端脚本

在服务器端，使用 PHP 创建脚本来处理下载请求：

<?php
$filename = $_POST['filename'];
$filepath = "files/" . $filename;

if (file_exists($filepath)) {
  $data = file_get_contents($filepath);

  header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  header('Content-Disposition: attachment; filename="' . $filename . '"');
  echo $data;
} else {
  header("HTTP/1.0 404 Not Found");
  echo "文件不存在！";
}
?>