dougan1465 2019-03-10 09:43
浏览 108

下载文件而不将其保存到AJAX调用的Web服务器

I'm submitting a form with ajax and after the form is submitted I need to download a pdf file generated on the server side with the php library mpdf. I don't want to save the pdf file in the server because after the user donwloads the file is not needed anymore. I've searched on google and someone suggest to use a Blob object. I'm also returning a json response to show to the user. Can someone explain if it is possible and how to achieve it? many thanks

this is my javascript code:

              $.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);

                        }

                    }

                });

and this is my php code

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');


                    }

Also from the response i get the following header and i can see the pdf file:

Cache-Control
public, must-revalidate, max-age=0 Connection
Keep-Alive Content-Description File Transfer Content-Disposition attachment; filename="doc.pdf" Content-Transfer-Encoding
binary Content-Type
application/pdf Date
Sun, 10 Mar 2019 11:11:35 GMT Expires Sat, 26 Jul 1997 05:00:00 GMT Keep-Alive
timeout=5, max=99 Last-Modified
Sun, 10 Mar 2019 11:11:35 GMT Pragma
public Server
Apache Transfer-Encoding
chunked X-Generator mPDF 7.1.9 X-Powered-By
PHP/7.3.0

But i also get the following very long string response:

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

  • 写回答

1条回答 默认 最新

  • douxuanling6523 2019-03-11 06:18
    关注

    Based on the comments from the question, here is an untested solution, that should work.

    Since javascript can't save files due to security reasons, the code first creates a Blob object from the response and then an anchor pointing to the object URL of the Blob. Afterwards the anchor is added to the DOM, then "clicked" and then removed from the 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);
            }
        }
    });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目,支持注册表等
  • ¥15 matlab 用yalmip搭建模型,cplex求解,线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题:大概就是类似后台自动检测某下架商品的库存,在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中?
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码,可以复制到另一手机上运行
  • ¥20 测距传感器数据手册i2c