如何在JSReport AspNetCore剃刀视图中添加图表

Question

我已经使用JsReport AspNetCore剃刀视图生成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。