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

5 posts, 2 answers
  1. Guillermo
    Guillermo avatar
    7 posts
    Member since:
    Nov 2017

    Posted 24 Aug Link to this post

    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?

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    484 posts

    Posted 28 Aug Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Guillermo
    Guillermo avatar
    7 posts
    Member since:
    Nov 2017

    Posted 28 Aug in reply to Dimitar Link to this post

    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.

  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    484 posts

    Posted 29 Aug Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Guillermo
    Guillermo avatar
    7 posts
    Member since:
    Nov 2017

    Posted 29 Aug in reply to Dimitar Link to this post

    One more time, thanks a lot, Dimitar !!!!
Back to Top