从 AJAX 调用下载文件而不将其保存到网络服务器

Question

我正在使用 ajax 提交表单，提交表单后，我需要使用 php 库 mpdf 下载在服务器端生成的 pdf 文件。我不想将 pdf 文件保存在服务器中，因为用户下载后不再需要该文件。我在谷歌上搜索过，有人建议使用 Blob 对象。我还返回一个 json 响应以显示给用户。有人可以解释它是否可能以及如何实现它？非常感谢

这是我的 javascript 代码：

              $.ajax({

                    type: form.method,
                    data: $(form).serialize(),
                    dataType: 'JSON',

                    beforeSend: function() {
                        // Show loader
                        $(".loader").show();
                    },


                    success: function(response) {

                        // Hide loader
                        $(".loader").hide();


                        if (response.error_code == '200') {

                            // Add class alert danger to the message
                            $('.alert', $('.horizontal-form')).addClass('alert-success').show();
                            // Show error message
                            $('#error_message').html(response.error_message);
                            // Remove default validation error message from template
                            $('#error_message').get(0).nextSibling.remove();
                            // Remove class alert danger if was left by previous validation
                            $('.alert', $('.horizontal-form')).removeClass('alert-danger');
                            // reset form fields
                            form.reset();
                            // Scroll back to show success message
                            scrollTo(success, -200);

                        }

                    }

                });

这是我的 php 代码

if(isset($_POST['userLetter'])){

                        header("Content-Type", "application/pdf");

                        // Render the view using twig and pass params to it
                        $html=$twig->render('/km-letters/km-letter-new-user.twig', array(
                            // Render user details on twig topbar
                            'prova' => 'pippo'

                        ));

                        $mpdf->WriteHTML($html);


                        return $mpdf->Output('foobar-' . time() . '.pdf','D');


                    }

另外从响应中我得到以下标题，我可以看到 pdf 文件：

缓存控制
公共，必须重新验证，最大年龄 = 0 连接
活着 内容描述 文件传输 内容处置 附件;文件名="doc.pdf" 内容传输编码
二进制 内容类型
申请/pdf 日期
格林威治标准时间 2019 年 3 月 10 日星期日 11:11:35 过期 1997 年 7 月 26 日星期六 05:00:00 GMT 保持活力
超时=5，最大值=99 上次修改
格林威治标准时间 2019 年 3 月 10 日星期日 11:11:35 编译指示
民众 服务器
阿帕奇 传输编码
分块 X-发电机 mPDF 7.1.9 X-Powered-By
PHP/7.3.0

但我也得到以下很长的字符串响应：

XHRPOSThttp://router.kondomatica.me/km-users/createUser#[HTTP/1.1 200 OK 332ms] HeaderCookieParametriRispostaTempiAnalisi dello stackPayload rispostax1JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFswIDAgNTk1LjI4MCA4NDEuODkwXQo

Answer 1

根据问题中的 cmets，这是一个未经测试的解决方案，应该可以工作。

由于 javascript 出于安全原因无法保存文件，因此代码首先从响应中创建一个 Blob 对象，然后创建一个指向 Blob 的对象 URL 的锚点。然后将锚点添加到 DOM，然后“单击”，然后从 DOM 中删除。

$.ajax({
    type: form.method,
    data: $(form).serialize(),
    cache: false,

    beforeSend: function() {
        // Show loader
        $(".loader").show();
    },

    success: function(response, responseCode, xhr) {
        // Hide loader
        $(".loader").hide();

        if (responseCode == "200") {
            var disposition = xhr.getResponseHeader('content-disposition');
            var matches = /"([^"]*)"/.exec(disposition);
            var filename = (matches != null && matches[1] ? matches[1] : 'doc.pdf');
            var blob = new Blob(response, {
                type: 'application/pdf'
            });
            var link = document.createElement('a');

            link.href = window.URL.createObjectURL(blob);
            link.download = filename;

            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            // Add class alert danger to the message
            $(".alert", $(".horizontal-form"))
            .addClass("alert-success")
            .show();
            // Show error message
            $("#error_message").html(response.error_message);
            // Remove default validation error message from template
            $("#error_message")
            .get(0)
            .nextSibling.remove();
            // Remove class alert danger if was left by previous validation
            $(".alert", $(".horizontal-form")).removeClass("alert-danger");
            // reset form fields
            form.reset();
            // Scroll back to show success message
            scrollTo(success, -200);
        }
    }
});