web浏览器网页打印
1、浏览器打印相对还是比较简单的,但也导致控制起来就麻烦。对于简单的打印需求直接用js调用window.print()即可。如果想要更好的控制打印结果,那这个就不能满足了。
十载的嘉禾网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整嘉禾建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“嘉禾网站设计”,“嘉禾网站推广”以来,每个客户项目都认真落实执行。
2、市面上有挺多专门做打印功能的商用插件,要不收费,要不免费版阉割有水印,这在公司里使用自然是不行的。也有第三方的插件可用。但如果能自己去封装组件的话,要控制起来自然就更爽了。所以本篇介绍一个打印插件,用vue方式封装,直接js也是简单改改可用,毕竟知道原理才是重点。抛开浏览器的限制,比如在nw和electron项目中,就可以直接调用底层api通过打印指令打印,这就在此不表,后续可以专门在写一篇这个的打印。
3.浏览器控制打印样式和页面布局是不同的,核心就是尺寸,字体和分页这些。尺寸单位在网页上是px单位,打印用的毫米(mm),比如A4纸尺寸是210×297mm,按1英寸=25.41mm换算,即8.264×11.688英寸
所以,A4纸96dpi下的分辨率是794×1123,这就是我们在制作网页的时候需要的象素。一般页面样式和打印样式会不同,打印样式可用媒体查询@media print {}设置或者单独指定print文件使用。字体看打印机支持,一般微软雅黑和黑体比较好,分页也就是一个样式:page-break-after:always;可以单独用个空元素设置,以下是使用和vue组件的代码。
一、在vue主main.js文件引用组件
import print from '@/utils/print.js'
Vue.use(print)
标题名称:web浏览器网页打印
网页URL:http://scyanting.com/article/dsojpcd.html