如何呈现ASP .Net Core剃须刀页面的区域（PDF）

Question

我正在编写带有Razor页面的ASP.Net Core Web App，需要将页面的一部分呈现为PDF。我敢肯定，使用jsreport等可用的pdf库之一，实际的PDF创建应该很简单。我发现了几个将页面呈现为字符串的示例，除了我只需要报告区域外，这很棒。

我正在努力的是如何仅呈现PDF页面的一部分。此图基本上显示了我的页面的结构。页眉，导航和页脚来自我的应用程序的_Layout。范围部分由所有报告页面共享，报告内容为实际页面。

是否可以仅呈现页面的一部分？

如果内容区域也是局部的，可以单独呈现吗？

我几乎没有UI开发经验，所以请原谅我的天真：）

Answer 1

这是我呈现页面报告区域的解决方案。 简单的答案是，将我要渲染的页面部分的html内容发布回服务器，将其渲染为PDF，然后将其作为文件下载返回。

为此，我首先需要获取包含报告的页面部分的html内容。为此，我将报告的div的ID设置为“ report-content”，然后使用一些脚本来捕获该html。

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

提交请求的表单具有一个隐藏的“ ReportContent”元素，用于存储html。

@using (Html.BeginForm("Export", "Home", FormMethod.Post))
{
    <input type="hidden" name="ReportContent" />
    <input type="submit" id="btnSubmit" value="Download PDF" />
}

在服务器端，我使用JsReport API创建了一种从html呈现PDF的方法。

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"));
}

最后，我为该帖子添加了处理程序，以处理PDF，并将文件结果返回到每个报告页面。

public async Task<IActionResult> OnPostAsync()
{
    return await RenderPDFAsync(Request.Form["ReportContent"].ToString());
}

我的代码比这里显示的代码具有更多的验证性，并且我所有报表页面都有一个通用的PageModel派生基类，因此新报表所需的唯一操作是添加后处理程序并将该部分的ID设置为包含在PDF中。我还打算将渲染移至服务，以便可以共享它，而不是每次创建报告时都重新创建。