Open a popup containing ASPX postback result

2018-06-27 17:15:58

I have an ASPX page with many fields that generate PDF documents when I click an "export to PDF" button.

I'd now like to have a "print PDF" button in JavaScript that does something like this:

w = window.open(?);
w.print();
w.close();

where "?" will perform the same postback as my "export to PDF" button.

If you need to submit (postback) your form to new window you can try to change form target to fake, like:

var form = $("form");
form.attr("target", "__foo");

Submit a form.

form.submit();

And remove the target (setitmeout(,1) - pot the event in end of js "event-queue", in our case - after form submitting):

setTimeout(function () { form.removeAttr("target");  }, 1);

Also, before submit you can try to open window with __foo id for more styling, and the form will submitted (postback) in this window instead of a new one:

 var wnd = window.open('', '__foo', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes');

But I have no idea how to handle the submitted window and catch the onload or jquery's ready event. If you can do it share the workaround please and call the wnd.print(); You can play with iframes inside this wnd and maybe you will find a solution.

Updated:

Try to have a look in this prototype [tested in Chrome]:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        function PrintResult() {
            var wnd, checker, debug;

            debug = true;

            // create popup window
            wnd = window.open('about:blank', '__foo', 'width=700,height=500,status=yes,resizable=yes,scrollbars=yes');

            // create "watermark" __loading.
            wnd.document.write("<h1 id='__loading'>Loading...</h1>");

            // submit form to popup window
            $("form").attr("target", "__foo");
            setTimeout(function() { $("form").removeAttr("target"); }, 1);

            if (debug)
            {
                $("#log").remove();
                $("body").append($("<div id='log'/>"));
            }

            // check for watermark
            checker =
                setInterval(function () {
                    if (debug) $("#log").append('. ');

                    try {

                        if (wnd.closed) { clearInterval(checker); return; }

                        // if watermark is gone
                        if (wnd.document == undefined || wnd.document.getElementById("__loading") == undefined) {
                            if (debug) $("#log").append(' printing.');
                            //stop checker
                            clearInterval(checker);

                            // print the document
                            setTimeout(function() {
                                wnd.print();
                                wnd.close();
                            }, 100);
                        }
                    } catch (e) {
                        // ooops...
                        clearInterval(checker);
                        if (debug) $("#log").append(e);
                    }
                }, 10);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button runat="server" ID="ReportButton" OnClick="ReportRenderClick" Text="Export to PDF" OnClientClick="PrintResult()"/>
        <asp:Button runat="server" Text="Just a button."/>
    </div>
    </form>
</body>
</html>

And here is .cs file:

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void ReportRenderClick(object sender, EventArgs e)
    {
        Response.Clear();
        Thread.Sleep(2000);
        Response.ContentType = "application/pdf";
        Response.WriteFile("d:1.pdf");

        //Response.ContentType = "image/jpeg";
        //Response.WriteFile("d:1.jpg");

        //Response.Write("Hello!");
        Response.End();
    }
}

Open the pdf window with IFrame and you could do this:

Parent Frame content

<script>
window.onload=function() {
  window.frames["pdf"].focus();
  window.frames["pdf"].print();
}
</script>
<iframe name="pdf" src="url/to/pdf/generation"></iframe>

Inspired from this https://stackoverflow.com/a/9616706

In your question tag you have the asp.net tag, so I guess you have access to some kind of ASP.NET server technology.

I would suggest to do it like this:

Create a HttpHandler or an ASP.NET MVC action that returns a FileContentResult

In your page, use this code to download and print the file (actually found it here, pasting it for future reference!)

<a href="/path/to/file.pdf" onClick="window.print();return false">Click here to download the printable version</a>

There are some good tutorials on writing the server side:

Walkthrough: Creating a Synchronous HTTP Handler

How to get particular image from the database?

And one of my own: Download PDF file from Web location and Prompt user SaveAs box on client in web-Application ASP C#

链接地址: http://www.djcxy.com/p/77478.html

上一篇: 您是否可以拥有多个Google Site Verification代码？

下一篇: 打开一个包含ASPX回发结果的弹出窗口