乐趣区

关于javascript:表格组件实现打印功能

jiezi

这是一个不是很罕用的性能，但却是在不经意间晋升用户体验。

应用场景

用户通过界面搜寻出一组数据，认真一看这组数据切实是太重要了，重要到须要向上汇报(拍马屁)。

此时的用户能够抉择: 抱着电脑 || 截图发送 || 发送链接和查问条件。

但咱们做为前端开发人员，是能够向用户提供另外一种抉择: 将查问后果打印，以纸质的模式进行信息传递。有时候，实实在在拿在手里的货色更有感觉。

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

实现形式

比方咱们当初有这么一组很有价值的数据（敲黑板，这都是我致力码进去的那种自已都不违心看的博文），当初要实现将这些博文打印的性能须要以下几个步骤。

1、生成根底款式

在网页中展现的表格成果总是形形色色，想打印到纸张上是须要调整下展示款式。这些款式以字符串行式后行存储，会在前面的步骤中应用到。

const style = '<style>\n'
    + 'table{width: 100%;border-collapse: collapse;border-spacing: 0;}\n'
    + 'th,td{height: 18px;padding:11px;border: 1px solid #999;font-size: 12px;color: #666;}\n'
    + 'th{color: #333}\n'
    + 'a{color: #666; text-decoration:none;}\n'
    + 'tr[empty-template] td{text-align: center}\n'
+ '</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 中实现了该性能，形式有点差别。点击这里查看源码

退出移动版