选择打印预览时如何触发javascript功能

Question

我使用rangelider创建一个滑块组件,如下所示

但是,当我准备打印时,在打印预览中,滑块条有缩放,而滑块按钮位置值与html中的值保持一致(在html中,当窗口调整大小时,有一个js函数来重新计算大小栏和滑块按钮的位置).

打印预览中的滑块:

所以我的问题是,如何调用函数来重新计算打印预览中的滑块按钮位置,如window.resize事件.

感谢任何评论!!

Answer 1

要使用javascript检测打印请求,您可以尝试:

var beforePrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (mql.matches) {
        beforePrintFunc();
    }
});

window.onbeforeprint = beforePrintFunc;

要在打印预览事件后检测:

var afterPrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (!mql.matches) {
        afterPrintFunc();
    }
});
window.onafterprint = afterPrintFunc;

但是,正如@torazaburo在下面的评论中指出的那样,只要您只进行样式更改,就可以采用更简单的方法:

@media print {
    //your print specific styles go here
}