网页调用打印功能怎么才能打印不一样的样式

文章介绍了如何通过CSS的@media规则来控制网页在屏幕显示和打印时的不同样式。特别是,利用`@mediaprint`可以定制打印机输出的样式,如隐藏某些内容。这种方法允许开发者为同一页面创建适应屏幕和打印的两种视觉体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前两天看见一个读者的博文,说到他要实现一个网页打印的功能,因为要控制网页打印的样式,因此通过reload来刷新一个临时页面,再打印这个页面,实现打印和展示页面不同样式的功能。想起来原来公司的前端也有这个问题,所以这里讲讲这个事情。

我们都知道css里面的media可以用来控制不同显示大小下的不同样式,例如:


@media only screen and (min-width: 1024px) {
  :deep(pre[class*="language-"]) {
    width: 900px;
  }

  table.arguments {
    width: 900px;
  }
}

@media only screen and (min-width: 1280px) {
  :deep(pre[class*="language-"]) {
    width: 900px;
  }

  table.arguments {
    width: 900px;
  }
}

@media only screen and (min-width: 1600px) {
  :deep(pre[class*="language-"]) {
    width: 1200px;
  }

  table.arguments {
    width: 1200px;
  }
}

但是这其实不是media的全部,如果留意上面的写法,可以发现里面有media only screen的字样,这是什么意思呢,就是说这段css只适用于在屏幕上展示的时候。

这篇文章的说法,media实际可以取三个值:

  1. screen 表示当前针对的是屏幕
  2. print 表示当前样式针对的是打印机
  3. speech 表示当前样式针对的是屏幕阅读

因此,如果要对页面在打印机下的效果进行特别样式,我们只需要调整对应的部分在media print下的样式就好了,比如在打印时隐藏部分内容:

@media print {
  #doc_menu {
    display: none;
  }
}

通过这种方式,我们就可以为同一个页面的打印和展示提供不通的样式,而样式调试,可以通过打印预览进行预览查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百家饭AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值