Question

我想覆盖window.print的行为，就好像dom包含一个表我不希望打印某些行。

我参考了下面关于如何破解javacript事件的堆栈溢出答案，但不确定如何更新打印的dom内容 JavaScript: Overriding alert()

任何人都可以对此有所启发。

感谢。

Answer 1

您可以通过覆盖window.print函数来运行自己的特殊JavaScript。但是，这与从导航栏中单击打印的人不同。

window.print是应用程序启动的打印流程。

var oldPrintFunction = window.print;

window.print = function () {
    console.log('Gonna do some special stuff');
    oldPrintFunction();
};

使用用户驱动的打印事件和编程的打印事件：

我不得不去看看，因为我很久以前写过的东西做了类似的东西，似乎我发现了它。此代码会监视媒体更改以转到print。

function beforePrint() {
    console.log('Do something special before print');
}

function afterPrint() {
    console.log('Do something after print');
}

if (window.matchMedia) {
    window.matchMedia('print').addListener(function (mql) {
        if (mql.matches) {
            beforePrint();
        }
        else {
            afterPrint();
        }
    });
}
// For IE, does not attach in browsers that do not support these events
window.addEventListener('beforeprint', beforePrint, false);
window.addEventListener('afterprint', afterPrint, false);

这将运行beforePrint函数中用于调用window.print()的任何内容，或者用户选择使用浏览器流程（命令+ p，文件 - >打印）等进行打印。

请注意： afterprint Chrome中存在错误，请参阅我的StackOverflow question here

Answer 2

使用媒体查询添加仅应用于页面打印版本的样式...

@media print {
   #idOdTableNotToPrint{ display:none; }
}

只有在打印页面时，才会隐藏ID为idOdTableNotToPrint的表格。

或者，如果您想为其创建一个全新的样式表，您可以通过添加<link>属性来指定CSS仅用于media='print'标记中的打印：

<link rel="stylesheet" href="css/print_styles.css" media='print'/>

覆盖javascript window.print的内容

2 个答案:

使用用户驱动的打印事件和编程的打印事件：