表格组件实现打印功能

使用场景

用户通过界面搜索出一组数据，仔细一看这组数据实在是太重要了，重要到需要向上汇报(拍马屁)。

此时的用户可以选择: 抱着电脑 || 截图发送 || 发送链接和查询条件。

但我们做为前端开发人员，是可以向用户提供另外一种选择: 将查询结果打印，以纸质的形式进行信息传递。有时候，实实在在拿在手里的东西更有感觉。

无纸办公的情况就不反驳了，我们只是多出一种选择，而非必选。

实现方式

比如我们现在有这么一组很有价值的数据（敲黑板，这都是我努力码出来的那种自已都不愿意看的博文），现在要实现将这些博文打印的功能需要以下几个步骤。

1、生成基础样式

在网页中展示的表格效果总是五花八门，想打印到纸张上是需要调整下展现样式。这些样式以字符串行式先行存储，会在后面的步骤中使用到。

const style = '<style>
'
    + 'table{ 100%;border-collapse: collapse;border-spacing: 0;}
'
    + 'th,td{height: 18px;padding:11px;border: 1px solid #999;font-size: 12px;color: #666;}
'
    + 'th{color: #333}
'
    + 'a{color: #666; text-decoration:none;}
'
    + 'tr[empty-template] td{text-align: center}
'
+ '</style>';
复制代码

为什么不用模板字符串？因为这种情况下通过模板字符串添加的style会多出不必要的换行与空格，完全没有必要先使用模板字符串再用正则replace。

2、打开一个新的窗口

const printWindow = window.open(); 
复制代码

是的，这一步就这么简单。(感觉可以和第三步合并？)

3、打印

如果原table没有需要移除的结构或样式，直接打印即可。

// 这里我们假设table是需要打印的那个表格， style就是第一步中拼接的样式
printWindow.document.write(style + table.outerHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();
复制代码

那如果原table存在复杂的结构或样式需要清除，那么就需要手动清理一份干净的element outerHTML了。

以下是打印预览时的效果:

相关实现

在表格组件GridManager中实现了该功能，方式有点差异。点击这里查看源码

作者：写个程序换个饼
链接：https://juejin.cn/post/6882701592647172109
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。