css - Highcharts：无需指定按钮即可打印图表

Question

我希望用户能够使用标准浏览器的打印功能打印带有 highcharts 控件的整个页面。但控制正在被切断。我将控件包装在.chart-wrapperdiv 中并尝试设置固定宽度以进行打印：

@media print {
    .chart-wrapper{
        width: 1000px;
    }
}
.chart-wrapper{
    width: 100%;
}

但它不起作用，打印的页面如下所示：

如果我在块图.chart-wrapper之外将宽度设置为 1000 像素，@media print则页面和打印页面上的宽度都会为 1000 像素，但我需要图表来获取非打印页面的所有宽度。

那么如何在非打印页面上以 100% 宽度和在打印页面上以 1000px 显示图表呢？

Answer 1

这对我有用。

<script>
(function() {

    var beforePrint = function() {
        chart = jQuery('#graphArea').highcharts();
        chartWidth = chart.chartWidth;
        chartHeight = chart.chartHeight;
        chart.setSize(670,chartHeight, false);                  
    };

    var afterPrint = function() {
        chart.setSize(chartWidth,chartHeight, false);
        chart.hasUserSize = null;    // This makes chart responsive
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

</script>

工作原理：检测“打印前”事件，将图表调整为 670 像素（打印 A4 的可靠宽度），检测“打印后”事件并将图表调整为原始大小。

致谢：TJ VanToll用于检测打印事件功能，此线程上的人员用于 highcharts 调整大小功能以及此答案用于建议 670px。

Answer 2

您是否尝试过在@media screen css 块内设置屏幕宽度？

@media print {
    .chart-wrapper{
        width: 1000px;
    }
}

@media screen {
    .chart-wrapper{
         width: 100%;
    }

}