Display PDF file inside Magnific-Popup modal

跟風遠走 提交于 2019-12-11 16:21:20

问题


I have a form on my website that the user needs to fill in order to generate a PDF file. If there are errors in the form, the server will respond with a json object with the list of errors, otherwise will respond with the PDF file (as a string). I'm trying to display that PDF file inside a Magnific-Popup (https://www.npmjs.com/package/magnific-popup).

    $('.preview-button').on('click', function (e) {
        event.preventDefault();
        var theLink     = $(this);
        var formElement = theLink.closest("form");

        $.ajax({
            url: theLink.attr('href'),
            method: 'GET',
            data: formElement.serialize(),
            success: function (response, textStatus, jqXHR) {
                var contentType = jqXHR.getResponseHeader("content-type") || "";
                if(contentType.indexOf('pdf') > -1){
                    // How can I tell to magnific popup to display the response as PDF?
                    $.magnificPopup.open({
                        // tell magnific popup to use the response...
                        type: 'iframe', 
                        closeOnBgClick: false
                    });
                }
                else{
                    if (response.hasOwnProperty('errors')){
                        // Form has error, show them
                        alert(response.errors);

                    }
                }
            }
        });

    });

回答1:


This might be useful for someone with the same problem: Instead of sending the pdf file as a response, I decided to generate a temporary pdf file in the server and send the path to that file as response. Then we can tell to magnificPopup to display it inside an iframe.



来源:https://stackoverflow.com/questions/38393253/display-pdf-file-inside-magnific-popup-modal

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!