CODEWITHSUNDEEP
javascriptasp.netpdf-generation
Serge
Serge

Reputation: 6692

Open a popup containing ASPX postback result

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.

Upvotes: 7

Views: 1729

Answers (3)

Anton Levshunov
Anton Levshunov

Reputation: 408

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();
    }
}

Upvotes: 2

Patrick Hofman
Patrick Hofman

Reputation: 156898

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:

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

  2. 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:

Upvotes: 1

palanik
palanik

Reputation: 3669

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

Upvotes: 1

Related Questions