当前位置：首页 > news >正文

如何防止用户通过打印功能复制页面文字

news 2026/2/6 4:42:09

简单防白嫖，要让打印出来的页面是空白，通常的做法是在打印时隐藏页面上的所有内容。这可以通过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规则已经将内容隐藏了，所以打印出来的页面将是空白的。

如何防止用户通过打印功能复制页面文字

相关文章：

如何防止用户通过打印功能复制页面文字

Python3网络爬虫开发实战（3）网页数据的解析提取

基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）

立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统

MySQL之视图和索引实战

快速参考：用C# Selenium实现浏览器窗口缩放的步骤

MyBatis 插件机制、分页插件如何实现的

CentOS6.0安装telnet-server启用telnet服务

H5+CSS+JS工作性价比计算器

Linux：基础命令学习

遇到Websocket就不会测了？别慌，学会这个Jmeter插件轻松解决....

高性能 Java 本地缓存 Caffeine 框架介绍及在 SpringBoot 中的使用

Http 和 Https 的区别（图文详解）

DP学习——外观模式

Vue3 + Vite 打包引入图片错误

搭建NFS、web、dns服务器

C++的UI框架和开源项目介绍

SpringBoot连接PostgreSQL+MybatisPlus入门案例

vue3里将table表格中的数据导出为excel

【算法】分布式共识Paxos

智慧医疗能源事业线深度画像分析（上）

【网络安全产品大调研系列】2. 体验漏洞扫描

高危文件识别的常用算法：原理、应用与企业场景

Linux云原生安全：零信任架构与机密计算

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

vue3 定时器-定义全局方法 vue+ts

Module Federation 和 Native Federation 的比较

短视频矩阵系统文案创作功能开发实践，定制化开发

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

如何配置一个sql server使得其它用户可以通过excel odbc获取数据