AnyGantt技术咨询：如何打印全部任务及解决print API仅打当前视图问题

当然可以实现这个需求！默认的print()方法确实只会捕获当前视口的内容，但我们可以通过调整图表布局+打印配置的组合来实现打印可见时间范围内的所有纵向项目。下面是具体的实现步骤和代码示例：

方法一：临时调整图表高度以显示所有项目后打印 #

这个思路是先保存当前图表的状态（比如高度、时间范围），然后临时调整图表高度让所有纵向项目都显示在当前时间范围内，打印完成后再恢复原状态：

// 1. 保存当前图表的配置
const originalHeight = chart.container().offsetHeight;
const originalTimeRange = chart.getVisibleRange();

// 2. 临时调整图表高度，让所有行（项目）都显示出来
chart.fitAllRows(); // 这个方法会自动调整图表高度以适配所有项目

// 3. 调用打印API，指定打印当前可见的时间范围（也就是你之前设置的时间区间）
chart.print({
  title: "甘特图打印",
  // 确保打印的是当前的时间范围，不自动扩展
  timeRange: originalTimeRange
});

// 4. 打印完成后恢复原图表高度（用setTimeout确保打印操作完成）
setTimeout(() => {
  chart.container().style.height = `${originalHeight}px`;
  chart.draw(); // 重新绘制图表恢复原状态
}, 1000);

方法二：使用导出API生成完整内容后打印 #

如果临时调整高度的方式不符合你的需求，也可以先将可见时间范围内的所有项目导出为PDF或图片，再打印导出的文件：

// 导出可见时间范围内的所有项目为PDF
chart.exportToPDF({
  timeRange: chart.getVisibleRange(), // 锁定时间范围为当前可见区间
  exportMode: "allRows" // 导出所有行（纵向所有项目）
}).then(function(data) {
  // 创建临时a标签来下载并打印PDF
  const blob = new Blob([data], {type: 'application/pdf'});
  const url = URL.createObjectURL(blob);
  const printWindow = window.open(url);
  printWindow.onload = function() {
    printWindow.print();
    URL.revokeObjectURL(url);
    printWindow.close();
  };
});

关键配置说明 #

• fitAllRows()：AnyGantt提供的方法，自动调整图表高度以显示所有行项目，不需要手动计算高度。
• print()方法的timeRange参数：指定打印的时间范围，传入当前的可见范围就能确保只打印你想要的时间区间。
• exportToPDF()的exportMode: "allRows"：强制导出所有纵向项目，即使它们不在当前视口中。

需要注意的是，如果你使用的是旧版本的AnyGantt，部分方法可能略有不同，建议根据你使用的版本调整对应的API调用。

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