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

最新推荐文章于 2025-05-07 15:33:23 发布

百家饭AI

最新推荐文章于 2025-05-07 15:33:23 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/baijiafan/article/details/128566300

Javascript 专栏收录该内容

10 篇文章

订阅专栏

文章介绍了如何通过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实际可以取三个值：

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

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

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

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