如何使用ngPrint库打印tc-angular-chartjs生成的图表？

你遇到的问题其实很常见——Chart.js生成的Canvas图表在直接用ngPrint打印时，经常会出现空白或不显示的情况。这是因为Canvas的绘图内容是动态渲染在内存中的，ngPrint默认的DOM克隆机制没法直接捕获这些像素数据。下面给你几个可行的解决方案：

方案一：打印前将Canvas转为图片 #

这个方法的核心思路是，触发打印操作前把Canvas图表转换成静态图片，打印完成后再恢复原Canvas，这样打印预览里就能正常显示图表了。

步骤与代码示例 #

1. 修改模板，给打印按钮添加自定义预处理函数：

<div id="printThisElement" ng-controller="AppController">
  <canvas id="chartCanvas" tc-chartjs-line chart-options="options" chart-data="data" auto-legend ng-click="chartClick($event)" chart="chart"></canvas>
  <button class="btn btn-primary" ng-click="prepareChartForPrint()" ng-print print-element-id="printThisElement">
    <i class="fa fa-print"></i> Print
  </button>
  <!-- 临时存放转换后的图片 -->
  <img id="chartImage" style="display:none;">
</div>

2. 在控制器中添加预处理和恢复逻辑：

angular.module('app', ['tc.chartjs', 'ngPrint'])
.controller('AppController', function($scope, $timeout) {
  // 你的图表数据与配置
  $scope.data = {/* 你的数据内容 */};
  $scope.options = {/* 你的配置项 */};

  $scope.prepareChartForPrint = function() {
    var canvas = document.getElementById('chartCanvas');
    var img = document.getElementById('chartImage');
    // 将Canvas转为base64格式的图片
    img.src = canvas.toDataURL('image/png');
    // 隐藏Canvas，显示图片
    canvas.style.display = 'none';
    img.style.display = 'block';

    // 打印完成后恢复原Canvas（用timeout确保打印流程完成）
    $timeout(function() {
      canvas.style.display = 'block';
      img.style.display = 'none';
    }, 1000); // 时间可根据实际情况调整
  };
});

方案二：优化打印样式与渲染时机 #

有时候图表不显示是因为打印样式导致Canvas尺寸异常，或者图表还没完全渲染就触发了打印。

1. 添加打印专用CSS #

在样式中添加媒体查询，确保打印时Canvas的布局正确：

@media print {
  #printThisElement {
    width: 100%;
    height: auto;
  }
  #printThisElement canvas {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
}

2. 确保图表完全渲染后再打印 #

如果图表是异步加载数据的，可以在Chart.js的onComplete回调里设置就绪标志，避免提前触发打印：

$scope.options = {
  // 其他配置项...
  animation: {
    onComplete: function() {
      $scope.chartReady = true;
      $scope.$apply(); // 通知Angular更新视图状态
    }
  }
};

然后在模板中禁用打印按钮直到图表就绪：

<button class="btn btn-primary" ng-disabled="!chartReady" ng-click="prepareChartForPrint()" ng-print print-element-id="printThisElement">
  <i class="fa fa-print"></i> Print
</button>

方案三：修改ngPrint默认行为（进阶） #

如果你不想手动处理图片转换，可以尝试修改ngPrint源码，让它在克隆DOM节点时自动处理Canvas——具体是在克隆时把Canvas内容转换成图片插入到克隆节点中。不过这个方法需要修改第三方库，灵活性不如前两个方案。

内容的提问来源于stack exchange，提问作者Silvio Troia