使用window.print()打印时Canvas图表引发大量空白页问题求助

出现大量空白页的核心原因是Canvas元素在打印布局中被异常拉伸，产生了超出预期的高度，结合你的代码来看，主要有两个触发点：

• 配置了maintainAspectRatio: false且responsive: true，打印时页面布局变化，Chart.js会重新计算Canvas尺寸，可能导致高度异常膨胀。
• 你在动画完成后将Canvas转为图片插入DOM，但原Canvas并未隐藏，打印时这个Canvas的渲染尺寸出现问题，占据了大量空白空间。

解决方案 #

1. 打印时隐藏原Canvas，只打印转换后的图片 #

既然已经把Canvas内容转成图片了，打印时直接隐藏原Canvas就能避免布局干扰：

修改HTML结构，给Canvas加打印隐藏类

<div class="chart">
    <canvas id="mycanvas" class="canvas print-hide" baseChart width="200" height="200"
        [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
        [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
        [plugins]="lineChartPlugins">
    </canvas>
    <div id="existing-image-id" class="chart-img"></div>
</div>

在全局样式文件（比如styles.css）里加打印样式

@media print {
    .print-hide {
        display: none !important;
    }
    /* 可选：确保图片适配打印页面宽度 */
    .chart-img img {
        max-width: 100%;
        height: auto;
    }
}

2. 调整Chart.js配置，限制打印时的尺寸 #

如果不想隐藏原Canvas，可以修改配置，在打印时强制控制Canvas的高度：

this.lineChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    // 监听 resize 事件，打印时强制设置Canvas高度
    onResize: function(chart, size) {
        if (window.matchMedia('print').matches) {
            chart.canvas.style.height = '200px';
        }
    },
    title: {
        text: "Argus 3 Year Historical Rating Trend",
        display: true,
        position: 'top',
        fontFamily: 'Montserrat',
        fontSize: 16,
        fontColor: '#4D4E50',
    },
    animation: {
        onComplete: function () {
            function convertCanvasToImage() {
                let canvas = document.getElementById("mycanvas") as HTMLCanvasElement;
                let image = new Image();
                image.src = canvas.toDataURL();
                return image;
            }
            if (index === 0) {
                let pnGImage = convertCanvasToImage();
                document.getElementById('existing-image-id').appendChild(pnGImage);
                index++;
            }
        }
    }
};

3. 给Canvas加固定CSS尺寸，防止异常拉伸 #

直接通过CSS限制Canvas的最大高度，避免响应式布局下的尺寸失控：

.canvas {
    max-height: 200px;
    width: 200px;
}

内容的提问来源于stack exchange，提问作者Syed mohamed aladeen