Ggtcf

I am writing an ASP.Net Core Web App with Razor pages and need to render part of a page to a PDF. I'm pretty sure the actual PDF creation should be simple using one of the pdf libraries available like jsreport. I found several samples for rendering a page to a string which is great except I only want the report area.

What I'm struggling with is how to render just a portion of my page for the PDF. This image shows basically how my page is structured. The header, nav and footer come from the _Layout for my app. The range partial is shared by all the report pages and the report content is the actual page.

Is there a way to render just a section of a page?

If the content area was also a partial could that be rendered separately?

I have almost no experience with UI development so please pardon my naivety :)

Here is my solution to render the report area of my page.
The simple answer is, post the html content of the page section I want to render back to the server, render it to a PDF and return that as a file for downloading.

To do this I first needed to get the html content for the section of the page containing the report. I did this by setting the id of the div for my reports to “report-content” and then using some script to capture that html.

$(function () 
 $("#btnSubmit").click(function () 
 $("input[name='ReportContent']").val($("#report-content").html());
 );
);

The form to submit the request has a hidden “ReportContent” element where the html is stored.

@using (Html.BeginForm("Export", "Home", FormMethod.Post))

 <input type="hidden" name="ReportContent" />
 <input type="submit" id="btnSubmit" value="Download PDF" />

On the server side I created a method using JsReport API to render the PDF from the html.

protected async Task<IActionResult> RenderPDFAsync(string content)

 var rs = new LocalReporting().UseBinary(JsReportBinary.GetBinary()).AsUtility().Create();

 var report = await rs.RenderAsync(new RenderRequest()
 
 Template = new Template()
 
 Recipe = Recipe.ChromePdf,
 Engine = Engine.None,
 Content = content
 
 );

 return new FileStreamResult(report.Content, new Microsoft.Net.Http.Headers.MediaTypeHeaderValue("application/pdf"));

Finally, I added the handler for the post that renders the PDF and returns the file result to each report page.

public async Task<IActionResult> OnPostAsync()

 return await RenderPDFAsync(Request.Form["ReportContent"].ToString());

My code has a bit more validation than shown here and I have a common PageModel derived base class for all of my report pages so the only thing required for new reports is adding the post hander and setting the id on the section to be included in the PDF. I also intend to move the rendering to a service so it can be shared rather than recreated every time a report is created.