HiQPdf 未在 pdf 上呈现图表.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的文档中找到了这个演示。它解释了如何使用javascript手动触发转换。

在C#代码中：

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

_{(还有"自动"one_answers"等待时间"触发模式(}

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

hiqPdfConverter.startConversion();

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

其中一个选项是onComplete回调。因此，为了将其整合在一起，我将其添加到Chart对象中：

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

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