解决前端打印痛点

遇到的问题

在前端经常会使用到的打印功能，有很多前端库可以帮我们处理这个问题，比如print.js、vue中的vue-print-nb等等，但是这些还不足以解决更复杂的打印问题。

其中经常遇到的问题有以下几点：

页面打印不完全，会遇到页面被裁边的问题，特别是在打印表格的时候
页面在大量的文字使用v-for循环渲染的时候，会遇到文字重叠的问题
无法代入样式到打印页面中，或者打印页面的样式被污染，这个是最烦人的

解决方案

使用原生html重画页面，比如checkbox，radio，table等等样式在前端组件库中的样式污染都是相当严重的。

所以我一般都会重画html页面，使用最原生的页面打印，看起来也是最舒服，最流畅的。

如果你只打印纯表格页面，我建议是使用print.js，基本上不会有问题，也不需要重画页面。

代码如下:

1
 printJS({
2
    documentTitle: "打印标题",
3
    printable: this.dataList, //  传入数据
4
    type: 'json', // 这里要设置为json
5
    properties: [ // 设置要打的表格属性栏和对应的dataList中的字段
6
        { field: 'name', displayName: "姓名" },
7
        { field: 'age', displayName: "年龄" },
8
        { field: 'address', displayName: "住址" }
9
    ],
10
    gridStyle: 'text-align: center; border: 1px solid lightgray; margin-bottom: -1px;'
11
})

打印效果如下：

其他复杂页面，比如像下面这样的页面，在dialog中展示的有表格有循环渲染的数据，几乎在我们的项目里100%出现文字重叠的情况的。

这个时候只能使用iframe来做打印功能，代码示例如下：

1
    async print() {
2
      const content = document.getElementById('shift-print').innerHTML; // 获取节点
3
      // 打印的内容里用到的所有样式，写在这里面
4
      const styles = `
5
        body { font-family: Arial; font-size: 14px; }
6
        h1 { color: #333; }
7
        .page-break { page-break-after: always; }
8
        table {
9
          border-collapse: collapse;
10
          border: 1px solid rgb(140 140 140);
11
          letter-spacing: 1px;
12
          margin: 1em 0;
13
          width: 100%;
14
          overflow: auto;
15
          table-layout: fixed;
50 collapsed lines
16
        }
17

18
        th,
19
        td {
20
          border: 1px solid rgb(160 160 160);
21
          padding: 8px;
22
        }
23
      `;
24
      this.printWithIframe(content, styles)
25
    },
26
    printWithIframe(content, styles = '') {
27
      const iframe = document.createElement('iframe');
28
      iframe.style.position = 'absolute';
29
      iframe.style.width = '0';
30
      iframe.style.height = '0';
31
      iframe.style.border = 'none';
32

33
      document.body.appendChild(iframe);
34

35
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
36

37
      iframeDoc.open();
38
      iframeDoc.write(`
39
          <!DOCTYPE html>
40
          <html>
41
            <head>
42
              <title>打印内容</title>
43
              <style>
44
                ${styles}
45
                @media print {
46
                  body { margin: 0; padding: 0; }
47
                  @page { size: A4; margin: 15mm; }
48
                }
49
              </style>
50
            </head>
51
            <body>
52
              ${content}
53
            </body>
54
          </html>
55
        `);
56
      iframeDoc.close();
57

58
      iframe.contentWindow.focus();
59
      iframe.contentWindow.print();
60

61
      setTimeout(() => {
62
        document.body.removeChild(iframe);
63
        this.printing = false
64
      }, 1000);
65
    },

打印出来的结果如下：

使用iframe基本上可以解决大部分场景下的问题了。