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)