调整chart.js画布的大小以进行打印

Question

我正在使用@media print {自定义我的打印视图.我的图表的问题是它们的打印大小取决于浏览器窗口的大小.因此,当我的浏览器很大时,画布对于页面来说太大了(我使用的是响应式图表)

我试图重新定义画布的大小@media print {而没有成功.

我打印时获得一致图表大小的解决方案有哪些(不影响我的浏览器视图)？

Answer 1

如果您的图表很简单,请尝试仅使用css

@media print {
    canvas.chart-canvas {
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        height: auto!important;
        width: auto!important;
    }
}

Answer 2

问题是图表不适合新的打印宽度尺寸.幸运的是,我们可以在启动打印时执行重绘.

解决方案是在canvas.toDataURL()调用打印时使用该方法将图表渲染为图像,然后在打印后将其切换回画布图表.有关toDataURL()的更多信息.

为了检测何时调用您的函数,webkit提供了方法window.matchMedia('print')(将true在打印期间或false之后再次),而其他浏览器使用window.onbeforeprint和window.onafterprint. 更多关于印刷方法.

剩下要做的就是确保图像使用CSS响应,即缩放到100%宽度.