HiQPdf 不会在 pdf 上呈现 Chart.js 图表

问题描述

我的组织使用 HiQPdf 从 .Net MVC Razor 视图创建 PDF。我想在视图/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,borderWidth: 1
                }]
            },options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,precision: 0,fontSize: 18,fontColor: '#000'
                        }
                    }],xAxes: [{
                        ticks: {
                            fontSize: 18,fontColor: '#000'
                        }
                    }]
                },responsive: false
            }
        });

解决方法

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

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

我在 HiQ 的文档中找到了 this demo。它解释了如何使用 javascript 手动触发转换。

在 C# 代码中：

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

_{（还有“自动”和“等待时间”触发模式）}

然后在网页上使用javascript触发转换：

hiqPdfConverter.startConversion();

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

这些选项中有一个 onComplete 回调。所以为了把它们放在一起，我把它添加到 Chart 对象中：

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

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