如何使用CSS创建易于打印的页面

最新推荐文章于 2024-09-11 20:31:47 发布

2301_79099480

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量316

点赞数 4

分类专栏：程序员文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79099480/article/details/137824223

版权

程序员专栏收录该内容

286 篇文章 0 订阅

订阅专栏

打印旅行或音乐会门票复制路线方向或时间表保存副本以供离线阅读在连通性差的区域中访问信息在危险或肮脏的条件下使用数据，例如厨房或工厂输出书面注释的草稿内容打印网络收据以进行簿记向难以使用屏幕的残障人士提供文件为拒绝使用这种新奇的t-internet废话的同事打印页面。

不幸的是，打印页面可能会令人沮丧：

文字可能太小，太大或太暗列可能太窄，太宽或页边距溢出切片可能被裁剪或完全消失墨水浪费在不必要的彩色背景和图像上链接网址无法显示图标，菜单和广告将被打印，永远无法点击！

许多开发者主张Web可访问性，但很少有人记得使打印的Web可访问！

将敏感的，连续的介质转换为任何尺寸和方向的分页纸都可能是一项挑战。但是，CSS打印控件已经可以使用很多年了，基本样式表可以在数小时内完成。以下各节介绍了使页面易于打印的良好支持和实用选项。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

打印样式表

打印CSS可以是：

除屏幕样式外，还适用。以屏幕样式为基础，打印机样式将在必要时覆盖这些默认样式。应用为单独的样式。屏幕和打印样式是完全分开的。两者都从浏览器的默认样式开始。

选择将取决于您的站点/应用程序。就个人而言，我大多数时候都使用屏幕样式作为打印基础。但是，我为输出完全不同的应用程序使用了单独的样式表，例如会议预订系统，该系统在屏幕上显示时间表网格，但在纸上按时间顺序排列。

可以在标准样式表之后将打印样式表添加到HTML ：

该print.css样式将被应用除了屏幕样式打印页面时。

要分离屏幕和打印介质，main.css应仅将屏幕定位：

或者，可以使用@media规则将打印样式包含在现有CSS文件中。例如：

/* main.css */ body { margin: 2em; color: #fff; background-color: #000; } /* override styles when printing */ @media print { body { margin: 0; color: #000; background-color: #fff; } }

@media print可以添加任意数量的规则，因此对于将关联的样式保持在一起可能是可行的。屏幕和打印规则也可以根据需要分开：

/* main.css */ /* on-screen styles */ @media screen { body { margin: 2em; color: #fff; background-color: #000; } } /* print styles */ @media print { body { margin: 0; color: #000; background-color: #fff; } }

测试打印机输出

每次您要测试打印布局时，都不必杀死树木并使用昂贵的墨水！以下选项可复制屏幕上的打印样式。

打印预览

最可靠的选项是浏览器中的打印预览选项。这显示了如何使用默认的纸张尺寸处理分页符。

或者，您可以通过导出为PDF来保存或预览页面。

开发者工具

尽管不会显示分页符，但是DevTools（F12或Cmd/Ctrl+ Shift+ I）可以模拟打印样式。

在Chrome中，打开开发者工具，然后选择更多工具，然后从右上角的三点图标菜单中选择渲染。更改模拟CSS媒体对打印在该面板的底部。

在Firefox中，打开开发人员工具，然后在“ 检查器”选项卡的样式窗格中单击“ 切换打印媒体模拟”图标：

破解您的媒体属性

假设您正在使用标签来加载打印机CSS，则可以将media属性临时更改为screen：

同样，这不会显示分页符。media="print"完成测试后，请不要忘记将属性还原到。