0

我的组织使用 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, 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
            }
        });
4

1 回答 1

0

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

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

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

在 C# 代码中：

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

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

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

hiqPdfConverter.startConversion();

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

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

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

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

于 2021-01-11T16:35:58.323 回答