选择打印预览时如何触发javascript功能 [英] How to trigger javascript function when select print preview

问题描述

我使用rangeslider创建一个滑块组件，它看起来像下面的

I use rangeslider to create a slider component, it looks like below

然而，当我准备好印刷这在打印预览中，滑动条具有缩放比例，而滑块按钮位置值与html中的值保持相同（在html中，当窗口调整大小时，有一个js函数来重新计算小节的大小和滑块按钮的位置）。

However, when I ready for print this, in print preview, the slider bar has scale in while slider button position value keep same with the value in html(In html, when window resize, there is a js function to re-calculate the size of bar and postion of slider button).

滑块在打印预览中：

slider in print preview:

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

So my question is, how to call function to re-calculate slider button postion in print preview, like window.resize event.

感谢您的任何评论!!

Appreciate for any comment!!

推荐答案

使用 javascript 你可以试试：

To detect print requests with javascript you can try:

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指出的方法可能更简单您只是在进行样式更改：

However, there may be an easier approach as pointed out by @torazaburo in the comment below as long as you are only making styling changes:

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

这篇关于选择打印预览时如何触发javascript功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！