如何在 JSReport AspNetCore Razor 视图中添加图表

Question

我使用 JsReport AspNetCore razor 视图来生成 Excel 和 PDF 报告。到目前为止，使用数据生成报告还不是问题。但是，现在我必须在生成的每个报告中包含一个图表。

我尝试包含 ChartJS 以显示图表，但在呈现报告后，图表未出现在 Excel 或 PDF 文件中。我已经使用 Chartjs 在 Web 视图中显示图表。它不会在 Web 视图中引起任何问题。只是我在视图加载后调用 ajax 从 API 获取数据。当 JsReportPipeline 呈现它时，API 不会被调用。

如何解决这个问题？使用剃刀视图在报表中添加图表。

Answer 1

这可能是因为图表 pdf 打印在图表完全呈现之前开始。

对于这种情况，jsreport chrome-pdf 配方提供了print trigger feature，它可以让您推迟 pdf 打印。要从 asp.net 控制器启用它，您可以使用此片段。

[MiddlewareFilter(typeof(JsReportPipeline))]
public async Task<IActionResult> ChartWithPrintTrigger()
{
    HttpContext.JsReportFeature()
        .Recipe(Recipe.ChromePdf)
        .Configure(cfg =>
        {
            cfg.Template.Chrome = new Chrome
            {
                WaitForJS = true
            };
        });

    return View("Chart", new { });
}

并在绘制图表时在您的 HTML 中调用触发器

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
       ...
    },
    options: {
        animation: {
            onComplete: function () {             
                window.JSREPORT_READY_TO_START = true
            }
        }
    }
});

一个完整的例子可以在这里找到 https://github.com/jsreport/jsreport-dotnet-aspnetcore

html-to-xlsx 配方不会将图表从源 html/js 转换为 excel。使用此配方添加 excel 的唯一方法是将生成的 excel 表格插入到准备好的 xlsx 模板中，该模板根据插入的表格显示图表。

文档是here 和一个示例here。