浏览器自带打印调用以及样式修改与调试

1. 代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>print</title>
</head>
 
<body>
  <style>
    .border {
      border: 1px solid red;
    }
    .box1 {
      width: 300px;
      height: 400px;
      background: red;
    }
    .box2 {
      width: 300px;
      height: 400px;
      border: 1px solid blue;
    }
 
    @media print {
      .box2 {
        display: none;
      }
      .box1 {
        /* 无效果 */
        background-color: aqua;
        border-color: blueviolet;
      }
      .print-button {
        display: none;
      }
    }
  </style>
  <div class="box1 border">
    box1 打印显示
  </div>
  <div class="box2">
    box2 打印隐藏
  </div>
  <button onclick="printDocument()" class="print-button">打印整个文档</button>
 
  <script>
    function printDocument () {
      window.print()
    }
  </script>
</body>
 
</html>

2.效果

3.如何调试打印样式

其中背景色样式在实际进行打印输出时不起作用，并没有对应的背景色，虽然预览的时候存在背景色

posted @ 2024-04-15 11:08 story.Write(z) 阅读(117) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 为什么vue打印的对象在浏览器中显示...

· 为什么打印对象,点开查看某属性有值,但是直接打印无值

· web打印样式预览调试技巧

· 浏览器调用print实现部分打印的两种方法

· 浏览器打印方案

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

test

昵称： story.Write(z)
园龄： 10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

coderzdz

个人记录

浏览器自带打印调用以及样式修改与调试

1. 代码

2.效果

3.如何调试打印样式

公告

搜索

常用链接

随笔分类 (83)

随笔档案 (81)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>print</title>
	</head>

	<body>
	<style>
	.border {
	border: 1px solid red;
	}
	.box1 {
	width: 300px;
	height: 400px;
	background: red;
	}
	.box2 {
	width: 300px;
	height: 400px;
	border: 1px solid blue;
	}

	@media print {
	.box2 {
	display: none;
	}
	.box1 {
	/* 无效果 */
	background-color: aqua;
	border-color: blueviolet;
	}
	.print-button {
	display: none;
	}
	}
	</style>
	<div class="box1 border">
	box1 打印显示
	</div>
	<div class="box2">
	box2 打印隐藏
	</div>
	<button onclick="printDocument()" class="print-button">打印整个文档</button>

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

	</html>

coderzdz

个人记录

浏览器 自带打印调用以及样式修改与调试

1. 代码

2.效果

3.如何调试打印样式

公告

搜索

常用链接

随笔分类 (83)

随笔档案 (81)

阅读排行榜

推荐排行榜

浏览器自带打印调用以及样式修改与调试