web打印，一篇搞定

对一个前端来说，没被打印折磨过的，你是最最幸福的 😭。对于我现在的中后台业务来讲，不同的浏览器兼容性，不同的业务场景，不同的设备调试，每次都要浪费巨多的时间 😭。

针对个人遇到的，以及现有的一些方案对比，总结一波 😎（文末有 PPT 版本，需要留言），希望能帮助同样头疼的你

# 1.浏览器打印

# 优缺点

通过 window.print() 、document.execCommand('print’) 调用浏览器打印

不同浏览器的区别：在 Safari 和 Chrome 都会弹起打印预览的窗口，FireFox 和 IE 没有预览而是直接让你选择打印机

但是直接使用浏览器打印虽然省事，但是存在很多问题，无法满足我们的打印需求：

1、打印的是整个网页，不能打印局部内容；
2、打印不支持自定义分页行为，默认不支持批量打印；
3、打印的时候样式有问题，所见非所得；
4、打印可以准确识别的样式单位是绝对单位（如 pt、mm、cm），对相对单位识别不同打印机可能会得到意想不到的结果；

# 问题来了：如何实现局部打印？🤔

# （1）简单粗暴，在你不需要考虑体验，项目里面用的也比较少时，可以试试看 😆

function innerHtmlPrint(){
    // 缓存页面内容
    const bodyHtml = window.document.body.innerHTML;
    // 获取要打印的dom
    const printContentHtml = document.getElementById("print").innerHTML;
    // 替换页面内容
    window.document.body.innerHTML = printContentHtml;
    // 全局打印
    window.print();
    // 还原页面内容
    window.document.body.innerHTML = bodyHtml;
}

1
2
3
4
5
6
7
8
9
10
11
12

# （2）iframe，稍微复杂点，需要将打印的内容添加到 iframe 里，然后打印整个 iframe，需要注意：往 iframe 里写一些样式的时候，一些 checkbox，radio 要特殊处理。

这里我把项目中用到的 iframe 局部打印抽出来了，各位可以直接 npm 使用 vue-iframe-print (opens new window) https://github.com/wudeh/vue-iframe-print 😎😎😎

如果你是 vue 项目，只需要安装后，在需要打印的 dom 上加上 v-print 即可，主要实现路径如下（样式部分省略）：

创建 iframe
构建 iframe docTyp、 head 信息
获取局部 dom，插入 iframe
window.print()

   function onIframePrint(printId) {
      const printContentHtml = document.getElementById("printId").innerHTML;
      const iframe = document.createElement("iframe");
      iframe.setAttribute(
        "style",
        "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
      );
      document.body.appendChild(iframe);
      iframe.contentDocument.write(printContentHtml);
      iframe.contentDocument.close();
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# （3）将打印内容转为图片

一倍清晰度模糊，可以用 2 倍 canvas。缺点：pdf 需要下载，有的产品需求需要一键打印。html2canvas 不支持 ie，兼容性也是个问题

function print() {
  var target = document.getElementsByClassName("right-aside")[0];
  target.style.background = "#FFFFFF";

  html2canvas(target, {
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

    //一页pdf显示html页面生成的canvas高度;
    var pageHeight = contentWidth / 592.28 * 841.89;
    //未生成pdf的html页面高度
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 595.28;
    var imgHeight = 592.28/contentWidth * contentHeight;

    var pageData = canvas.toDataURL('image/jpeg', 1.0);

    var pdf = new jsPDF('', 'pt', 'a4');

    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
    } else {
        while(leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if(leftHeight > 0) {
              pdf.addPage();
            }
        }
    }

    pdf.save("content.pdf");
}
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# pdf 转成图片，会失真，打印一定程度上会模糊，如果用的是针式打印机，打出来的东西基本不能看。👿

也是想了很久找的的解决办法（完美还原）：😬😬😬

  <object
    type="application/pdf"
    data="./滴滴出行行程报销单A.pdf"
    width="100%"
    height="700"
  ></object>

  <embed
     type="application/pdf"
     src="./滴滴出行行程报销单A.pdf"
     width="100%"
     height="700px"
  />

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.插件打印

一般是通过项目里面嵌入脚本，或者安装本地插件来完成，优缺点也都很明显

优点：

1、功能强大，可以调用到系统底层的东西，比如获取系统打印机列表，设置默认打印机等

2、可以实现无预览打印

缺点：

1、需要安装客户端，大多收费

2、第三方插件，无技术支持，出现问题难以解决（版本问题，chrome84 升级导致的证书问题）

3、本地插件的方式基本只有 window 系统版本

我们项目目前在使用的插件是 C-lodop，收费，现在用的注册码也不知道是谁在那搞得 🌚。

如果失效，意味着我们项目的所有打印基本废了。目前来看，好像是一次购买永久有效的，先不慌 🌚

这里列出几个插，仅供参考：

C-lodop (opens new window)：功能强大，兼容性不是很好，你想在保证清晰度的情况下，没办法写 css3，画个圆角边框都不行 🤧🤧🤧，依赖于系统 IE 版本，IE9 以下，打出来的东西乱七八糟。。。建议使用之前，仔细研究下官网给的 demo，这个插件的原理是，在页面嵌入一段 js，和本地客户端通过 webscoket 进行通信

HttpPrinter (opens new window)：和 C-lodop 差不多，可以去了解下

HiPrint (opens new window)：不需要安装客户端，但是没有 npm 包，依赖于 jQuery

# 打个嘴炮 😈😈😈

其实，大家要是有时间，可以自己用 nw.js 和 electron.js 自己撸一个，这位大佬自己就搞了一个：如何通过 Nw.js 纯前端实现调用热敏打印机打印小票？ (opens new window)

# 3.打印样式

# 先看下基本的页面模型

# @media print

可以控制打印时的样式，仅在打印生效，可以实现一些特殊需求。

# @page

设置页面大小（A3，A4，A5）、边距（margin）、方向（ auto、landscape、portrait）等。

# page-break-xxx（划重点）

page-break-before( after ) 用于设置元素前( 后 )的分页行为,可取值:

   * auto默认值。如果必要则在元素前插入分页符。
   * always在元素前插入分页符。
   * avoid避免在元素前插入分页符。
   * left在元素之前足够的分页符，一直到一张空白的左页为止。
   * right在元素之前足够的分页符，一直到一张空白的右页为止。
   * inherit规定应该从父元素继承 page-break-before 属性的设置。

page-break-inside设置元素内部的分页行为。取值如下:

   * auto默认。如果必要则在元素内部插入分页符。
   * avoid避免在元素内部插入分页符。
   * inherit规定应该从父元素继承 page-break-inside 属性的设置。

orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。

widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4.云打印（node + ipp）

# 先科普下打印机类型 🤔🤔🤔

激光打印机，办公室常见的打印机，一般用打印普通文档材料。利用激光加热将墨粉固定在纸上，从而实现打印功能。平常的耗材是墨粉，使用的纸张是普通纸，一般是打印黑白色。打印速度快后期耗材便宜 针式打印机，一般用于打印票据，或者需要按压打印的纸张。将色带上的墨水压在纸上，从而实现打印功能。平常的耗材是色带，使用的纸张是多联纸，比起其他两个分类针式打印机可以说是元老级别的，它是是市场上较早出现的种类。主要有 9 针、24 针、72 针、144 针等多种针式打印机。其特点比较鲜明结构简单、技术成熟、性能价格比好、消耗费用低。 热敏打印机，使用专用纸张,靠高温显示需要打印的信息.主要用于打印小票. 喷墨打印机，一般用于打印彩色材料。将墨水喷射在纸上，从而实现打印功能。平常的耗材是墨水，使用的纸张是普通纸，一般可以打印彩色。（另外也有一个耗材是墨盒，有些机型不必频繁更换）