如何渲染 ASP .Net Core 剃须刀页面的区域（pdf）答案

【问题标题】：How to render area of ASP .Net Core razor page (for pdf)如何渲染 ASP .Net Core 剃须刀页面的区域（pdf）
【发布时间】：2019-03-09 04:36:16
【问题描述】：

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

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

有没有办法只渲染页面的一部分？

如果内容区域也是部分区域，是否可以单独呈现？

我几乎没有 UI 开发经验，所以请原谅我的幼稚:)

【问题讨论】：

您目前的渲染效果如何。向我们展示您的 pdf 创建代码。

标签： asp.net asp.net-mvc razor-pages

【解决方案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 派生基类，因此新报告唯一需要的就是添加 post handler 并将部分的 id 设置为包含在 PDF 中。我还打算将渲染移至服务，以便可以共享它，而不是在每次创建报表时重新创建。

【讨论】：