单击按钮，在新窗口或选项卡中打开流式页面

Question

I am using .NET4 MVC3 VS2010. We are using ABCpdf to convert html to pdf and stream it to the browser. The problem is that I need to figure out a way for the pdf be opened in a new window or tab. I have read a bunch of posts on similar issue, but could find nothing to help with this specific case. Upon clicking a button (not a link) on a page, a controller action takes care of creating a memory stream from the html for that very page and then converts it to pdf and sends it to the browser.

Code in the view for that page: var pdfUrl = String.Format("window.location.href = '{0}';", Html.BuildUrlFromExpressionForAreas(c => c.GeneratePdf(myUrl))); } @(Html.Button("btnPdf", "Generate PDF", HtmlButtonType.Button, pdfUrl)))

Code in MyController action: public ActionResult GeneratePdf(string url) Doc pdfDoc = new Doc(); int docId; MemoryStream outputStream = new MemoryStream();

and a bunch of other code for pdf conversion..... then: byte[] pdfData = pdfDoc.GetData(); outputStream.Write(pdfData, 0, pdfData.Length); outputStream.Position = 0; return new FileStreamResult(outputStream, "application/pdf"); }

It works fine but the pdf is displayed in the same window/tab. How can I stream the data to a new window or tab in the browser? I am a newbee and would appreciate detailed help. target property does not work for this case. I could not work window.open into the view code for the button and I am not sure that would do the trick either. Thanks in advance

Answer 1

You could use a normal link with target="_blank" attribute:

@Html.ActionLink(
    "Generate PDF", 
    "GeneratePdf", 
    "MyController", 
    null,  
    new { 
        url = "some url",
        target = "_blank"
    }
)

or if you want a button you could use javascript:

<input type="button" value="Generate PDF" id="btnPdf" data-pdf-url="@Url.Action("GeneratePdf", "MyController", new { url = "some url" })" />

and then in a separate javascript file you could use jQuery and subscribe for the click event of this button and open a new window:

$(function() {
    $('#btnPdf').click(function() {
        // get the url of the data-pdf-url property of the button
        var url = $(this).data('pdf-url');
        window.open(url, 'pdf');
        return false;
    });
});

Answer 2

@Darin Dimitrov , Thanks, the page was missing the reference. I fixed that problem, but it behaves strangely: The first time I click the button it doesn't do anything (doesn't go back to any action in the controller.) the second time I click the button it opens a new tab but gives an error that he resource is unavailable and it shows it is looking for a view called undefined! if I ignore this and go back to the original page and click the same button for the third time then it behaves as I hoped it would on the first click: it opens a new tab and displays the original page data streamed and formatted in pdf, all correctly! any suggestions? I really appreciate your help with this. Here is my JS code:

<script type="text/javascript">
 $(document).ready(function () {
     $("#btnPdf").click(function () {
         var url = $(this).attr("href");
         $(this).attr("href", '@MvcHtmlString.Create(Html.BuildUrlFromExpressionForAreas<MyController>(c => c.GeneratePdf(Request.Url.ToString())))').bind("click",
                function () {
                    var win = window.open(url);
                    win.focus();
                    return false;
                });
     });
   });
 </script>