Pete Davies
Pete Davies

Reputation: 1031

Open dynamically generated PDF in Tab or iframe

Please help. I am obviously no expert but using suggestions from this site, I think I am really close to doing the following

Be able to open a dynamically generated PDF in a) a new Tab b) an iframe

Hopefully, I just need a couple of lines of the correct syntax and I will be there.

I am dynamically generating the PDF in a controller using itextSharp

CONTROLLER

public FileStreamResult GetPdf()
  {
    ...
    return new FileStreamResult(Response.OutputStream, "application/pdf"){FileDownloadName = "download.pdf"};
  }

VIEW

<input id="btnNewTab" type="button" value="New Tab" />
<input id="btnIframe" type="button" value="Iframe" />

<div id="pdfDiv"></div>

<script type="text/javascript">
  $(function () {

    $("#btnIframe").click(function () {
      $.get('/PDFTest/GetPdf', function (pdf) {
        alert(pdf.length);  // Works as expected
        // What do I need to put here to get the pdf to appear in a iframe
      });
    });

    $("#btnNewTab").click(function () {
      // asks me if I want to Open or Save the PDF.
      // If I choose Open, the PDF opens in a completely new Window.
      // Instead of the dialog, I just want the PDF to open in a new Tab
      // I am probably going about this in completely the wrong way.
      var HTML = "<iframe src='/PDFTest/GetPdf' style='width: 100%; height: 600px' ></iframe>";
      $('#pdfDiv').html(HTML);
    });

  });
</script>

In response to your suggestion Darin, I changed the Controller to:

public FileStreamResult GetPdf(someInfo from View)
  {
    ...
      Response.ContentType = "application/pdf";
      Response.AddHeader("Content-Disposition", "inline;test.pdf"); 
      Response.Buffer = true;
      Response.Clear();
      Response.OutputStream.Write(ms.GetBuffer(), 0, ms.GetBuffer().Length);
      Response.OutputStream.Flush();
      Response.End();

      return new FileStreamResult(Response.OutputStream, "application/pdf");
  }

Having done that, your suggestions worked fine but I realise that I did not explain my intentions clearly enough. I have therefore changed the VIEW to reflect what i am trying to do.

input id="btnNewTab" type="button" value="New Tab" />
<input id="btnIframe" type="button" value="Iframe" />
<iframe id="iframe"></iframe>
<div id="pdfDiv">
</div>
<script type="text/javascript">
  $(function () {

    $("#btnIframe").click(function () {

      $.ajax({
        url: '/PDFTest/GetPdf',
        type: "GET",
        data: json,  // This line will not be a problem
        dataType: "json",
        contentType: "application/pdf", // This line might be a problem
        success: function (pdf) {
          // What to I need to need to do to display the PDF in the above iframe
          $("#iframe").attr("src", pdf); // HTTP Error 400 - Bad Request.
        }
      });
    });

    $("#btnNewTab").click(function () {
      $.ajax({
        url: '/PDFTest/GetPdf',
        type: "GET",
        data: json,  // This line will not be a problem
        dataType: "json",
        contentType: "application/pdf", // This line might be a problem
        success: function (pdf) {
          // What to I need to need to do to disply the PDF in a new window
        }
      });
    });

  });
</script>

Upvotes: 3

Views: 25675

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

Action:

public ActionResult GetPdf()
{
    byte[] pdf = ...
    Response.AppendHeader("Content-Disposition", "inline;test.pdf");
    return File(pdf, "application/pdf");
}

To open in new Tab/Window:

@Html.ActionLink("view pdf", "getpdf", "somecontroller", null, new { target = "_blank" })

To open in an iframe your code looks fine. Just make sure to set the Content-Disposition header to inline.

Upvotes: 6

Related Questions