开发者社区> 航空母舰> 正文

网页打印

简介:
+关注继续查看

显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。 screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。 因此如果要精确的控制打印效果就应该使用printcss,这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印

web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print
css来实现打印。
使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
Java代码  收藏代码
  1. <link rel="stylesheet" href="print.css" media="print"/>  
  2. <style type="text/css" media="print"></style>  

使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:

Java代码  收藏代码
  1. @media print {  
  2.     selector{  
  3.     ...  
  4.     }  
  5. }  

 

自己指定打印分页CSS

page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方 式。每个打印属性都可以设定4种设定值:auto、always、left和 right。其中Auto是默认值,只有在有需要时,才需设定分页符 号 (Page breaks)。page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页
 

 



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
第一个网页| 学习笔记
快速学习第一个网页。
64 0
【7000字】一晚上爆肝浏览器从输入到渲染完毕原理
Chrome comic,推荐一本Chrome架构简要概述的漫画,Chrome架构于2008年同Chrome浏览器一起发布,原文地址,中文翻译。
109 0
js实现浏览器的打印功能——路径打印
js实现浏览器的打印功能——路径打印
304 0
前端答疑—换行如何输出在页面上
工作中我们有下面几种方式收集用户输入的内容 input 输入框,单行,整体样式,纯文本。 textarea 输入框,多行,整体样式,纯文本。 contentEditable,多行,独立样式,富文本。 其他富文本编辑器,多行,独立样式,富文本。 在不想使用那么重的富文本编辑器的情况下,又想可以换行,那么 textarea 就是我们的不二之选。 下面我们就来说一下,如何在回显的时候也显示换行。
199 0
条码打印软件如何实现二维码内容换行显示
制作公司二维码名片的时候往往会涵盖:公司名称,地址,电话,网址等等,通过微信扫描就可以轻松实现公司信息的呈现。如果制作的二维码名片中的信息可以换行显示,那么是不是会比较清晰明了呢,下面看一下二维码名片中的内容换行和不换行的对比效果,如下图:   通过图片可以看到,二维码名片中的内容换行显示会更简洁,也更容易辨认。
1914 0
window.print —— 浏览器打印扫盲
近日有个需求是做页面打印的,趁这个机会补一下比较冷门的浏览器打印知识。本文只讨论 Chrome、Safari、Firefox浏览器的情况。
4373 0
C#热敏打印图片 串口打印图片
原文:C#热敏打印图片 串口打印图片 如图,一步一步慢慢调出来的 //串口通信类 public System.
1083 0
使用jqprint插件完成页面打印
使用jqprint插件完成页面打印 jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以打印网页上的某个区域,这是个亮点。
1516 0
一分钟修改网页中的内容
有时候需要修改网页中的内容,一般采取的做法是截图网页然后使用PS或特殊工具修改,这种方法麻烦又费力,而且修改后的效果往往不是很好。
1153 0
+关注
航空母舰
文章
问答
视频
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载