Question

当我打印右下方框架时，文本some text部分被高级图表覆盖，因为它们在打印前不会调整大小。是否有解决方案为网站配置@media print打印布局，并强制在打印网站时重绘大小/重新调整为容器大小？

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
<div id="container" style="height: 400px"></div>

的JavaScript

$(function () {
    Highcharts.setOptions({ // Apply to all charts
        chart: {
            events: {
                beforePrint: function () {
                    this.oldhasUserSize = this.hasUserSize;
                    this.resetParams = [this.chartWidth, this.chartHeight, false];
                    this.setSize(600, 400, false);
                },
                afterPrint: function () {
                    this.setSize.apply(this, this.resetParams);
                    this.hasUserSize = this.oldhasUserSize;
                }
            }
        }
    });

    $('#container').highcharts({

        title: {
            text: 'Rescale to print'
        },

        subtitle: {
            text: 'Click the context menu and choose "Print chart".<br>The chart size is set to 600x400 and restored after print.'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });

});

JSFiddle

Answer 1

在打印网站时，使用将触发CSS图表中的重排和CSS图表中的媒体查询的侦听器应以设定大小打印。

JS：

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        padding:0px;
        margin:0px;
        width: 210mm;
        height: 297mm;
    }
    #container {
        float:left;
        padding: 0px;
        margin: 0px;
        width: 80%;
    }
}

CSS：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px;"></div>

HTML：

<div class="container">
    <div class="row">
        <div>cczfsd</div>
        <div>sfdfds</div>
        <div>sdfssd</div>
    </div>
</div>

JSFiddle：http://jsfiddle.net/w4ro5xb7/13/

全屏测试结果以获得更好的效果：http://jsfiddle.net/w4ro5xb7/13/show/

Answer 2

以下是不同解决方案的混合，无需export.js（将导出按钮添加到页面上的所有图形...）

尺寸会自动重新缩放，然后在打印后重置。

主要在IE上测试

window.onbeforeprint = function() {
    $(Highcharts.charts).each(function(i,chart){
        chart.oldhasUserSize = chart.hasUserSize;
        chart.resetParams = [chart.chartWidth, chart.chartHeight, false];

        var height = chart.renderTo.clientHeight;
        var width = chart.renderTo.clientWidth;
        chart.setSize(width, height);
    });
}
window.onafterprint = function() {
    $(Highcharts.charts).each(function(i,chart){
        chart.setSize.apply(chart, chart.resetParams);
        chart.hasUserSize = chart.oldhasUserSize;
    });
}

<强>更新我现在使用不同的版本，修复每个图表的大小而不是使用clientWidth。它适用于我测试的3个浏览器（IE 11，FF＆amp; Chrome）

function redimChartBeforePrint(chart, width, height) {
    if (typeof(width) == 'undefined')
        width  = 950;
    if (typeof(height) == 'undefined')
        height = 400;
    chart.oldhasUserSize = chart.hasUserSize;
    chart.resetParams = [chart.chartWidth, chart.chartHeight, false];
    chart.setSize(width, height, false);
}
function redimChartAfterPrint(chart) {
    chart.setSize.apply(chart, chart.resetParams);
    chart.hasUserSize = chart.oldhasUserSize;
}

window.onbeforeprint = function() {
    redimChartBeforePrint($('#chart1').highcharts());
    redimChartBeforePrint($('#chart2').highcharts(), 800, 600);
    ...
};
window.onafterprint = function() {
    redimChartAfterPrint($('#chart1').highcharts());
    redimChartAfterPrint($('#chart2').highcharts());
    ...
};

Answer 3

根据这些建议，我想提供一种第三种方法，该方法应解决先前答案的某些缺点，并结合我在其他地方看到的其他解决方案，得出对我有用的（上面没有）。 / p>

设置window.onbeforeprint很好，除非您有其他onbeforeprint处理程序并且不想让他们失望。 window.addEventListener('onbeforeprint', function)允许您设置多个独立的事件侦听器，并在完成后将其删除。此外，Safari仍然不支持这些特定的事件侦听器，因此建议改用window.matchMedia，所有常绿浏览器都支持。{p>

function _setupPrintHandler() {
    let chart; // save a local copy so you don't have to find the element again.
    var beforePrint = function() {
        chart = $('#container').highcharts();
        if (chart) {
            // Set your arbitrary width/height needed for printing
            // Save the existing chart info if explicitly set
            // beforeChartWidth = chart.chartWidth;
            // beforeChartHeight = chart.chartHeight;
            const printWidth = 710, printHeight = 450;
            chart.setSize(printWidth, printHeight, false);
            chart.reflow()
        }
    };
    var afterPrint = function() {
        if (chart) {
            // if the previous values were saved, use them, otherwise `null` will return to auto-fit the container size
            const prevWidth = beforeChartWidth || null;
            const prevHeight = beforeChartHeight || null;
            chart.setSize(prevWidth, prevHeight, false);
            chart.reflow();
        }
    };

    // use the new window.matchMedia query with better support
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }
    // Fallback if matchMedia isn't available
    else {
        window.addEventListener('onbeforeprint', beforePrint);
        window.addEventListener('onafterprint', afterPrint);
        // Use elsewhere if needed:
        // window.removeEventListener('onbeforeprint', beforePrint)
        // window.removeEventListener('onafterprint', afterPrint)
    }
};

打印网站

3 个答案: