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

Question

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

我尝试包含 ChartJS 来显示图表，但在呈现报告后图表没有出现在 Excel 或 PDF 文件中。我使用 Chartjs 在 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 table 插入准备好的 xlsx 模板中，该模板显示基于插入的 table.

的图表

文档是 here and an example here。

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

How to add Charts in JSReport AspNetCore Razor View

razor

.net-core

charts

report

jsreport