如何在 WordPress 中通过 AJAX 触发 Excel 文件自动下载-js教程-PHP中文网

如何在 WordPress 中通过 AJAX 触发 Excel 文件自动下载

WordPress 中通过 AJAX 调用 PHP 导出 Excel 时，浏览器（Chrome/Firefox/Edge）因安全策略禁止后台请求触发文件下载，需改用标签 + blob 方式实现前端驱动的自动下载。

wordpress 中通过 ajax 调用 php 导出 excel 时，浏览器（chrome/firefox/edge）因安全策略禁止后台请求触发文件下载，需改用 `` 标签 + `blob` 方式实现前端驱动的自动下载。

当前代码的核心问题在于：AJAX 是异步 HTTP 请求，其响应内容默认被 JavaScript 接收并丢弃，不会触发浏览器原生的文件下载行为——即使 PHP 正确设置了 Content-Disposition: attachment 头，也无法绕过浏览器的安全限制。

✅ 正确方案：将 Excel 数据以 Blob 形式接收，动态创建标签并模拟点击完成下载。

✅ 修改步骤（推荐且兼容所有现代浏览器）

1. 保持后端逻辑不变（仅微调）

确保 PHP 函数返回二进制流（无需修改），但移除 exit 前的任何额外输出（如 echo、空格、BOM），否则会导致 Blob 损坏：

unity3d游戏开发之相机切换中文WORD版

本文档主要讲述的是unity3d游戏开发之相机切换；希望对大家会有帮助；感兴趣的朋友可以过来看看

下载

function export_data_to_excel() {
    // 验证 nonce（增强安全性，建议添加）
    if (!wp_verify_nonce($_POST['nonce'] ?? '', 'llc_quote_profile_autocomplete_nonce')) {
        wp_die('Invalid nonce');
    }

    $spreadsheet = new PhpOffice\PhpSpreadsheet\Spreadsheet();
    $activeWorksheet = $spreadsheet->getActiveSheet();
    $activeWorksheet->setCellValue('A1', 'Hello World !');

    $writer = new PhpOffice\PhpSpreadsheet\Writer\Xlsx($spreadsheet);

    // 关键：清除可能的缓冲输出
    if (ob_get_level()) ob_end_clean();

    header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    header('Content-Disposition: attachment; filename="hello_world.xlsx"');
    header('Cache-Control: max-age=0');
    header('Pragma: public');
    header('Expires: 0');

    $writer->save('php://output');
    exit;
}
add_action('wp_ajax_export_data_to_excel', 'export_data_to_excel');
add_action('wp_ajax_nopriv_export_data_to_excel', 'export_data_to_excel');

⚠️ 注意：务必确保 functions.php 或其他文件中无 echo、var_dump、UTF-8 BOM 或空白字符位于

2. 前端 JS 替换为 Blob 下载方案

将原来的纯 AJAX 请求改为 fetch（更可控）+ Blob + 动态链接下载：

$('#llc-quote-details').on('click', '#exportExcelAndPDF', function(e) {
    e.preventDefault(); // 阻止默认行为（如有）

    const customersPo = $('#edited-customers-po').val();

    fetch(llcQuoteAutocomplete.ajaxurl, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            action: 'export_data_to_excel',
            customers_po: customersPo,
            nonce: llcQuoteAutocomplete.nonce,
        }),
    })
    .then(response => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.blob(); // ← 关键：接收为 Blob
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'hello_world.xlsx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url); // 清理内存
        document.body.removeChild(a);
    })
    .catch(err => {
        console.error('Excel download failed:', err);
        alert('导出失败，请检查网络或重试。');
    });
});

? 为什么原方案失效？

Chrome/Firefox/Edge 等现代浏览器明确禁止 XMLHttpRequest / fetch 的响应自动触发下载，这是防止恶意脚本静默下载病毒文件的关键防护机制。
$.ajax() 返回的是文本/JSON 响应体，而非原始二进制流；即使设 dataType: 'binary'，jQuery 也不原生支持可靠解析 Excel 二进制。

✅ 验证要点（调试必查）

打开浏览器开发者工具 → Network 标签 → 点击导出按钮 → 查看 export_data_to_excel 请求：
- Status 应为 200
- Response Headers 必须包含 Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
- Preview/Response 不应显示乱码或错误信息（如 “headers already sent”）
若出现 Failed to execute 'createObjectURL' on 'URL'，大概率是 PHP 输出了额外字符（检查 BOM、空行、print_r 等）