chrome浏览器web打印需要了解的几个小技巧

简介: 当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧。
Tip1 - 应用媒体查询

网页中屏幕展示的样式在打印的时候可能不太一样,有些需要隐藏或者需要调整,包括是否展示、字体大小、颜色等等,那么我们可以通过使用媒体查询来控制打印样式。

//media = screen 为屏幕显示的样式
<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
//media = print 为需要打印的时候使用的样式
<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

这样,我们可以把在打印的时候需要调整的样式放在printstylesheet文件中。当然如果不想通过文件来判断都写在一起也是可以的,通过如下media print 来指定某些在print下的样式表现。

@media print{
    .logo{
        display:none;
    }    
}

然后,还可以通过import的方式来引入在print下的样式文件:

<style type="text/css">
      @import url("css/printstylesheet.css") print;
  </style>
Tip2 - 展示与隐藏

页面中有些元素可能在屏幕中需要展示,但是在打印的时候不需要,所以需要将这些隐藏掉,那么只需要将这些元素设置为display:none即可,如下:

div{display:none;}/**当然这种样式还是需要放在media print 中了。**/
Tip3 - 分页符

在打印的时候,如果内容过多,是不会自动进行分页的,如果你认为该位置不合适,也可以通过样式来控制在哪个位置进行分页处理。

.break_before { page-break-before: always; }/**应用给页面顶部元素即可**/
.break_after { page-break-after: always; }/**应用页面底部元素即可**/

通过分页符号来控制分页位置。当然page-break-before page-break-after不只有always一个值,还有其他的几个值可以使用。

描述
auto 默认值,如果必要则在元素前插入分页符
always 在元素前/后插入分页符
avoid 避免在元素前/后插入分页符
left 在元素之前/后足够的分页符,一直到一张空白的左页为止
right 在元素之前/后足够的分页符,一直到一张空白的右页为止
inherit 规定应该从父元素继承 page-break-before/after 属性的设置
Tip4 - 控制打印首选项

当我们在打印的时候,如果需要打印到A3纸上或者需要横向如何办呢?当然,在web打印设置中是可以设置的,但是,我们想通过程序来设置默认项/首选项那应如何处理呢?

web打印更多设置

我们可以通过css来控制我们的首选项:

@page{
    size : A4 portrait;/*A4 portrait纵向,landscape 横向*/
    @top-left {
        display: none;
    }
    @bottom-center {
        display: none;
    }
}

关于@page的规则,可以参考文章http://www.w3cplus.com/css/designing-for-print-with-css.html ,这里讲解的很细致,我们也可以通过这些规则来设定页眉页脚内容等。

Tip5 - 打印背景色

在web中背景色在打印的时候无法显示,我们可以通过打印设置中的选项“背景图形”勾选来让背景色或背景图片来展示出来,同时,我们也可以通过css来控制是否展示。

.dot{
    position:absolute;
    -webkit-print-color-adjust: exact;/**通过该设置,可以在打印时显示背景图和背景色**/
    background-image:url(/bg.jpg); 
}

以上是chrome浏览器的设置,其他的设置我没有去查找,不过应该是都有对应的设置的。

Tip6 - 其他
  • 字体颜色:打印的时候,字体颜色设置为黑色。
  • 单位:屏幕展示我们一般使用px,但是打印尽量使用物理单位cm in
  • 浮动:尽量少的使用浮动,在某些浏览器上浮动可能会导致无法正常打印

以上是chrome浏览器中在web打印的时候需要了解的几个小技巧,暂时整理这些,后续发现陆续补充进来。

相关文章
|
27天前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
66 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
|
4天前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
13天前
|
Web App开发 iOS开发
Web 浏览器
【8月更文挑战第27天】Web 浏览器。
28 2
|
20天前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
54 1
|
21天前
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
1月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
118 8
|
25天前
|
Web App开发
Chrome浏览器导出HTTPS证书
Chrome浏览器导出HTTPS证书
38 0
Chrome浏览器导出HTTPS证书
|
8天前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
20 0
|
8天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
30 0
|
9天前
|
Web App开发 缓存 前端开发
哇塞!Chrome 浏览器竟有四大神秘进程,带你探秘互联网世界的强大引擎!
【8月更文挑战第31天】Chrome浏览器因其快速稳定的表现深受用户喜爱,其背后是四大独特多进程架构的支持:浏览器主进程管理界面与进程协调;网络进程处理网络请求及缓存;渲染进程将网页内容转化为可视化页面;插件进程则确保各类插件如Flash Player的安全稳定运行。通过这些进程间的高效协作,Chrome实现了流畅、稳定的上网体验。例如,在访问新闻网站时,各进程协同工作,确保网页内容顺利加载和显示。理解这些进程有助于提升使用体验并有效解决问题。
19 0