如何用Ajax方法下载Laravel Excel

基础概念

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页应用能够快速地更新内容。

Laravel Excel 是 Laravel 框架的一个扩展包，用于处理 Excel 文件的导入和导出。

类型

Ajax 下载主要分为两种类型：

直接通过浏览器下载：服务器生成文件并返回一个指向该文件的 URL，浏览器通过该 URL 进行下载。
通过 JavaScript 处理下载：服务器返回数据，JavaScript 在客户端处理这些数据并触发下载。

应用场景

适用于需要在不刷新页面的情况下下载文件的场景，例如：导出数据报表、下载用户数据等。

实现步骤

以下是一个使用 Ajax 方法下载 Laravel Excel 文件的示例：

1. 安装 Laravel Excel

首先，确保你已经安装了 Laravel Excel 扩展包。如果没有安装，可以使用 Composer 进行安装：

composer require maatwebsite/excel

2. 创建导出类

创建一个导出类，例如 UsersExport.php：

<?php

namespace App\Exports;

use App\Models\User;
use Maatwebsite\Excel\Concerns\FromCollection;

class UsersExport implements FromCollection
{
    public function collection()
    {
        return User::all();
    }
}

3. 创建控制器方法

在控制器中创建一个方法来处理导出逻辑：

<?php

namespace App\Http\Controllers;

use App\Exports\UsersExport;
use Maatwebsite\Excel\Facades\Excel;
use Illuminate\Http\Request;

class ExportController extends Controller
{
    public function export(Request $request)
    {
        return Excel::download(new UsersExport, 'users.xlsx');
    }
}

4. 前端使用 Ajax 下载

在前端页面中使用 Ajax 来触发下载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Excel</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="download-btn">Download Excel</button>

    <script>
        $(document).ready(function() {
            $('#download-btn').click(function() {
                $.ajax({
                    url: '/export', // 替换为你的导出路由
                    method: 'GET',
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(data) {
                        var url = window.URL.createObjectURL(new Blob([data]));
                        var link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', 'users.xlsx');
                        document.body.appendChild(link);
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error('Download failed:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>