HiQPdf 未在 pdf 上呈现 Chart.js 图表

Question

我的组织使用 HiQPdf 从 .Net MVC Razor 视图创建 PDF。我想在 view/pdf 中包含一个使用 Chart.js 库的图表。问题是当从视图中呈现 pdf 时，图表不会显示在页面上。图表在呈现为视图时显示良好。

这里是 chart.js 代码：

var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '# of Complaints',
                    data: data,
                    backgroundColor: 'rgba(11, 73, 150, 1)',
                    borderColor: 'rgba(11, 73, 150, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            fontSize: 18,
                            fontColor: '#000'
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontSize: 18,
                            fontColor: '#000'
                        }
                    }]
                },
                responsive: false
            }
        });

Answer 1

事实证明，在 HiQPdf 开始将图表转换为 PDF 之前，javascript 创建图表没有机会创建图表并将其包含在 HTML 中。

我需要一种方法让 HiQPdf 在开始转换之前等待图表呈现。

我在 HiQ 的文档中找到了 this demo。它解释了如何使用 javascript.

手动触发转换

在 C# 代码中：

HtmlToPdf htmlToPdfConverter = new HtmlToPdf();
htmlToPdfConverter.TriggerMode = ConversionTriggerMode.Manual;

_{(还有'Auto'和'WaitTime'两种触发方式)}

然后在网页上使用javascript:

触发转换

hiqPdfConverter.startConversion();

太棒了！所以现在我所需要的只是一种在我知道图表已完成渲染时调用 startConversion() 函数的方法。 Chart.js 提供了一些选项来自定义找到的图表动画过程 here。

在这些选项中有一个 onComplete 回调。因此，为了将它们整合在一起，我将其添加到图表对象中：

options: {
   animation: {
      onComplete: function() {
         hiqPdfConverter.startConversion();
      }
   },
   ...
}

现在图表已完全呈现，html 的一部分通过 HiQPdf 转换为 pdf！

HiQPdf 未在 pdf 上呈现 Chart.js 图表

HiQPdf isn't rendering Chart.js chart on pdf

.net

c#

hiqpdf