如何打印 angular-图表

Question

并想打印这张图表。我的代码是，

<html>
<head>Chart</head>
<body>
    <div class="row"><b>Patient Report</b>
        <div>
            <canvas id="line" class="chart chart-line" data="agedata" colours="colours"
                labels="labels" legend="true" series="series"click="onClick"></canvas>
        </div>
    </div>
    <div class="row">
        <a href="javascript:window.print()" class="btn btn-success">Print</a>
    </div>
</body>

但它什么也不打印。谁能建议我打印图表的方法？

Answer 1

您可以使用 toDataURL() 将 canvas 制作成图像（并且您可以使用特定媒体 CSS 隐藏 canvas 并交换在 img 中以 src 作为数据 URL 打印时）

请记住在生成数据 URI 之前等待动画结束，否则您最终会得到一个空白图像。

Answer 2

Chart.js 依赖 HTML5 canvas 来呈现其图表，但是浏览器无法打印 canvas 对象。
绕过此限制的解决方案是在打印时将 canvas 转换为图像，如 this post.

中所述

干杯，

如何打印 angular-图表

How to print angular-chart

html

javascript

charts

angularjs

chart.js