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

【问题标题】：How to trigger javascript function when select print preview选择打印预览时如何触发javascript函数
【发布时间】：2015-11-27 12:35:07
【问题描述】：

我使用rangeslider创建了一个滑块组件，如下图

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

打印预览中的滑块：

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

感谢您的任何评论！

【问题讨论】：

可以创建jsfiddlejsfiddle.net演示吗？
看看this article。它展示了一些可能的方法来检测用户的打印请求。但是，不确定您之后是否能够更改文档的外观。试一试。没什么可失去的，对吧？

标签： javascript html css browser

【解决方案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
}

【讨论】：

不这样做，为什么不在 CSS 中添加 @print 媒体查询？
@torazaburo 这是一个很好的观点。虽然 OP 的问题似乎是关于如何在打印预览之前触发 javascript function
当然，这取决于你想多狭隘地解释他的问题。似乎有些清楚，他的最终目标是以特定尺寸打印滑块。在beforePrint 上安装挂钩是实现这一目标的一种特殊方法。媒体查询是另一个。钩子方法的问题是，在打印完成后，您可能需要恢复以前的大小——是否有afterprint 事件呢？
我添加了可能更简单的 css 方法，还提供了 javascript 方法的另一半。感谢@torazaburo 的反馈。
使用纯 CSS 通常不可能做到这一点。例如，React Grid Layout 只会在“resize”事件上调整大小 => 您需要在浏览器打印页面以调整网格大小之前手动触发此事件，即使您的媒体查询设置正确。

【解决方案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);

}

【讨论】：