Export an html to PDF and open it in another tab or new browser

[Guillermo]

I develop an application asp.net mvc core 2.1.

I have this:

--------------------------------------------------------------------------------------------------------------------------------
@model Dto
@{
    ViewBag.Title = "PrincipalView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

...

<div class="page-container hidden-on-narrow row">
    <partial name="partialView" model="Model" />
</div>

...

<button class="btn btn-submit btn-block" onclick="getPDF('.pdf-page');">Print Receipt</button>

...

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

function getPDF(selector) {
    kendo.drawing.drawDOM($(selector)).then(function (group) {
        kendo.drawing.exportPDF(group/*, { paperSize: "A5", landscape: true }*/).done(function(data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "partialview.pdf"
            });
        });
    });
}

--------------------------------------------------------------------------------------------------------------------------------

With the above code, I can export a partial view and save it, but I don't want that approach.

I want to export that partial view to PDF and open it in another tab or a new browser window.

Could you guys point me to the correct path?

[Dimitar]

Hello Guillermo,

You should be able to achieve the desired result by utilizing the kendo.saveAs() method proxyTarget option as follows:

kendo.saveAs({
  dataURI: data,
  fileName: "HR-Dashboard.pdf",
  proxyURL: "@Url.Action("Pdf_Export_Save")",
  forceProxy: true,
  proxyTarget: "_blank"
});

Important to note is that in order for the returned document from the service to be opened in a new browser window, the the "Content-Disposition" header has to be set to inline; filename="<fileName.ext>":

[HttpPost]
public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)
{
  var fileContents = Convert.FromBase64String(base64);
  Response.Headers.Add("Content-Disposition", "inline; filename=" + fileName);
  return File(fileContents, contentType);
}

Regards,
Dimitar
Progress Telerik

[Guillermo]

Thanks a lot, Dimitar!

I resolve with your answer. But I've got another question. 

When the "Pdf_Export_Save" action finishes and sends back the pdf if the browser has the configuration to block popups then block my action to open the pdf. Is there any different way to advise the user about the blocks popups ?? I mean, the browser advises me but it is something, I thought, a little tricky for some users to realize that they need to unlock that behavior to be able to get the pdf.

Regards.

[Dimitar]

Hello Guillermo,

A suggestion approach that you could try is to open a separate window prior to exporting the content and then configure the proxyTarget to be equal to the new window:

<script>
  $("#export").click(function () {
    window.open('', 'pdftab');

    kendo.saveAs({
      dataURI: data,
      fileName: "HR-Dashboard.pdf",
      proxyURL: "@Url.Action("Pdf_Export_Save")",
      forceProxy: true,
      proxyTarget: "pdftab"
    });
  });
</script>

Regards,
Dimitar
Progress Telerik

[Guillermo]

One more time, thanks a lot, Dimitar !!!!