【问题标题】：Export Kendo chart to pdf with a logo in angularJS将剑道图表导出为带有 angularJS 徽标的 pdf
【发布时间】：2016-08-12 04:37:50
【问题描述】：

这是我的 angularjs 代码，仅导出 pdf，但我想使用自定义徽标导出。对这个问题有任何帮助吗？我的剑道图表 HTML 代码在这里：

<div kendo-chart="vm.chart"
                 k-options="vm.chartOptions"
                 k-data-source="vm.chartOptions.datasource">
            </div>

导出按钮代码在这里..

vm.saveAsPdf = function (event) {
    var elem ;
    if (navigator.userAgent.indexOf("Chrome") !== -1) {
        elem = event.toElement;
    }
    else {
        elem = event.currentTarget;
    }
    //$(elem).parent().next().find('.k-chart').getKendoChart().saveAsPDF();
    debugger;
    var chart = $(".k-chart").getKendoChart();

    var fileName = $(elem).closest('li').children().find('.ng-binding').text().trim();
    chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
        kendo.saveAs({
            dataURI: data,
            fileName: fileName + ".pdf"
        });
    });
}

【问题讨论】：

您能否在 dojo.telerik.com 上创建一个小提琴，以及您在 Data 中收到的内容？
您希望只在导出的 PDF 上使用徽标，还是一直使用？
@Ezanker - 视情况而定。在导出的 pdf 或图表上显示，任何内容都将被接受。请提供解决方案。

标签： angularjs kendo-ui kendo-chart

【解决方案1】：

图表渲染完成后，使用图表的render event在其表面绘制。

然后使用 Kendo Drawing Image 添加徽标。

render: function(e){
    var chart = e.sender;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var rect = new geom.Rect(
        [50, 0],  // Position of the top left corner
        [400, 60] // Size of the rectangle
    );
    var image = new draw.Image("https://www.w3.org/Icons/SVG/svg-logo-h.svg", rect);
    chart.surface.draw(image);
}

DEMO

在演示中，我在图表左上角附近添加了一个随机图像。

【讨论】：