Kendo UI 图表系列标签在 PDF 生成中呈现不正确

Question

我正在使用 Kendo UI dataviz ASP.NET MVC 框架来呈现图表，就像给定的示例 here (using the ASP.NET MVC version)。

图形和系列标签在浏览器中呈现良好：

为了生成 PDF，我使用Rotativa 框架 - 使用 wkhtmltopdf 工具将 html 内容转换为 PDF。

图表在 PDF 中完美呈现，但顶部的系列标签呈现不正确：

如您所见，标签有足够的空间展开 - 但它们是“随机”呈现在彼此之上的。

我在同一个导出的 PDF 中有多个图表，所有图表的所有标签都放置不正确。

这是我的 rotativa 动作结果设置：

return new ViewAsPdf("Reports/_ReportBaseIndex", FilterData)
    {
        PageOrientation = ExportOrientation,
        CustomSwitches = "--disable-smart-shrinking --print-media-type --zoom 0.75 --javascript-delay 1000"
    };

有没有办法修复标签？是否可以静态放置标签，还是必须重新计算标签位置？如果是这样，我该怎么做？

Answer 1

我也遇到了这个问题。看起来它与 wkhtmltopdf 而不是 rotativa 有关。无论如何，Rotativa实际上在引擎盖下使用了它。

我尝试使用 Rotativa 和 wkhtmltopdf 生成 PDF 并同时使用两者来解决问题。

我采用的解决方案是在视图中手动生成图例，像这样循环遍历不同的类别和颜色

        <table class="legend-table">
    @foreach (var category in Model.Data)
    { 
        <tr>
            <td style="background-color: @category.Colour"></td>
            <td>@category.Category</td>
            <td>@category.Value %</td>
        </tr>
    }
</table>

Answer 2

我们的解决方案是将 PDF 生成器替换为 Evo Pdf。

这为我们解决了所有的渲染问题。