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

Question

我使用rangeslider创建一个滑块组件，如下所示

但是，当我准备打印此文件时，在打印预览中，滑块的缩放比例为，而滑块按钮位置的值与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
}

Answer 2

我正在寻找与@Moishe Lipsker提出的解决方案等效的jQuery，但没有效果。

这就是为什么对于jQuery我可以在打印预览上进行更改的原因，并使用以下代码进行更改：

$(window).on({
   'beforeprint': () => {
       this.detectPrintPreview();
    },
    'print-preview': () => {
        this.formatDesktopPrintPreview();
    }
});

detectPrintPreview() {
    $('.article-page').trigger('print-preview');
}

formatPrintPreview() {
    console.log('print preview');

    $('.box').appendTo('.example-elem);

}