javascript - 选择打印预览时如何触发javascript函数

Question

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

但是，当我准备打印这个时，在打印预览中， slider 已经缩放，而 slider 按钮位置值与 html 中的值保持一致(在 html 中，当窗口调整大小时，有一个 js 函数可以重新调整计算条的大小和 slider 按钮的位置)。

打印预览中的 slider :

所以我的问题是，如何调用函数重新计算打印预览中的 slider 按钮位置，例如 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
}