如何防止用户通过打印功能复制页面文字
简单防白嫖，要让打印出来的页面是空白，通常的做法是在打印时隐藏页面上的所有内容。这可以通过CSS的媒体查询（Media Queries）来实现，特别是针对@media print的查询。
在JavaScript中，你通常不会直接控制打印的内容（因为那是CSS和HTML的工作），但你可以通过修改DOM元素的样式来影响打印效果。
下面是一个示例，展示了如何使用JavaScript和CSS来让打印出来的页面是空白：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Blank Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content">
<!-- 页面内容 -->
<h1>Hello, this is the content that will be hidden when printing.</h1>
</div>
<button onclick="prepareForPrint()">Print as Blank</button>
<script src="script.js"></script>
</body>
</html>
CSS:
#content {
/* 默认显示内容 */
}
@media print {
#content {
display: none; /* 当打印时隐藏内容 */
}
}
JavaScript:
在这个例子中，其实JavaScript并不需要做什么特别的事情，因为CSS的@media print已经足够控制打印时的样式了。但如果你想要在用户点击按钮时动态地改变某些元素以影响打印效果（例如，你可能想要添加一些仅在打印时显示的元素），你可以在JavaScript中这样做：
function prepareForPrint() {
// 这里你可以添加一些逻辑来动态地改变DOM以影响打印效果
// 但在这个例子中，我们不需要做任何事情，因为CSS已经足够了
// 调用打印函数（这通常是通过浏览器提供的API）
window.print();
}
当用户点击“Print as Blank”按钮时，会触发prepareForPrint函数，该函数会调用window.print()来启动打印流程。由于CSS的@media print规则已经将内容隐藏了，所以打印出来的页面将是空白的。