前端打印网页

最新推荐文章于 2024-07-10 09:41:19 发布

我不是小白脸

最新推荐文章于 2024-07-10 09:41:19 发布

阅读量3.6k

点赞数 4

分类专栏：小技能文章标签：打印网页打印时取消水印

本文链接：https://blog.csdn.net/wobushixiaobailian/article/details/87921242

版权

本文介绍了如何使用CSS控制网页打印，包括如何只打印部分内容，并且讲解了如何在网页显示水印但打印时不显示水印的技巧，通过在打印前临时移除水印元素实现。

摘要由CSDN通过智能技术生成

文章目录

CSS控制局部打印例子
网页加水印，而打印时不加水印
参考文献

打印网页，可以调用window.print()方法。该方法会打印出当前网页。

现在你就可以打开控制台，尝试一哈

在这里插入图片描述
运行结果：

当然，可以控制哪些元素不被打印

 <style>
@media print {
   
    .btn-area {
   
        display: none;
    }
}
</style>

这样.btn-area修饰的元素就不会被打印出来。

CSS控制局部打印例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css控制局部打印</title>  
</script>
<style>
@media print {
    
    .btn-area {
    
        display: none;
    }
}
</style>
</head>

<body>



<p>开始的一点小小不悦，往往能省却之后的很多痛苦(源自电影《怦然心动》)</p>
<p>毫无计划的花费，就等于让每个人来分享你的收入(源自卡耐基书籍《人性的弱点》)</p>
<p>休息与学习一样重要，周末与工作日一样重要（源自书籍《学习之道》）</p>
<p>每一件有意义的事都不是那么容易的(源自电影《天气预报员》)</p>
<p>无聊之人才会觉得无聊(源自美剧《西部世界》)</p>
<p>生活中的每一件事情都是有趣的(源自书籍《羞怯的简明12种应对方法》)   </p>
<p>我不是完美的(源自书籍《羞怯的简明12种应对方法》)</p>
<p>害羞并不完全是坏的(源自书籍《羞怯的简明12种应对方法》)</p>
<p class="btn-area">把它看成是一件有趣的事(源自书籍《羞怯的简明12种应对方法》)</p>
<p class="btn-area">脸皮厚的人在整个人类历史上不会混得太差(源自书籍《厚黑学》)</p>

<button class="btn-area" type="button" onclick="doPrint()">打印</button>

</body>
<script>
function doPrint(){
    
    window.print