如何提供2个打印选项？

Question

我知道JavaScript的window.print（）工作时，你想打印一个网页，但我有一个客户谁需要两个选项。

1. 点击一个链接到彩色打印
2. 打印黑色和白色。

我知道这可以通过打印样式表完成，您可以将div设置为display：none等，但我不确定如何在单击时触发每个选项。这是否需要一些JavaScript？

Answer 1

我会建议有两个打印样式表，然后有一对单选按钮来选择颜色或黑/白。更改单选按钮时更改打印样式表，然后只需打印一个调用print()的按钮。

Answer 2

我认为这样做最简单的方法是将主要与CSS - 建立与色彩和B/W选项的打印样式表的切换与body类，如：

/* default option: color */ 
h1 { color: #00C; } 

/* b/w option */ 
body.bw h1 { color: #666 } 

然后使用JavaScript在body标记上切换bw类。像jQuery工具使得这个非常简单，但如果你需要做没有出库，尝试：

// these functions assume you don't already have any 
// CSS classes set on the body element 

function printBW() { 
    document.body.setAttribute('class', 'bw'); 
    window.print(); 
} 

function printColor() { 
    document.body.setAttribute('class', ''); 
    window.print(); 
} 

，并在你的HTML：

<a href="javascript:printColor()">Print color</a> | 
<a href="javascript:printBW()">Print B/W</a> 

我要指出，这真的值得学习一些简单的jQuery用于这种事情 - 如果您想要在不使用库的情况下支持旧版浏览器，涉及DOM操作的任何操作都会非常快速地复杂化。