This is a feature that you don’t use very often, but can inadvertently enhance the user experience.

Usage scenarios

The user searches the interface for a set of data that, on closer inspection, is so important that it needs to be reported up.

At this time the user can choose: holding the computer | | screenshots send | | send links, and the query conditions.

But we, as front-end developers, can offer users an alternative: print the query results and deliver the information in paper form. Sometimes, it feels better when it’s actually in your hand.

In the case of the paperless office, there is no argument. We just have an option, not a necessity.

implementation

Let’s say we have a valuable set of data (type on the blackboard, this is the kind of blog posts I tried to code and didn’t want to read), and now we have to print these blog posts in the following steps.

1. Generate the base style

The tables displayed on the web are always varied, and you need to adjust the presentation style if you want to print them on paper. These styles are stored first as string lines and will be used in later steps.

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>';
Copy the code

Why not use template strings? Because in this case the template string adds unnecessary newlines and Spaces to the style, there is no need to use the template string and then the regular replace.

2. Open a new window

const printWindow = window.open(); 
Copy the code

Yes, this step is as simple as that. (Feel merged with Step 3?)

3, print,

If the original table has no structure or style to remove, simply print it.

/ / here we assume that the table is the need to print the form, the style of the style is the first step in joining together printWindow. Document. Write (style + table. OuterHTML); printWindow.document.close(); printWindow.print(); printWindow.close();Copy the code

If the original table has complex structures or styles that need to be removed, you’ll need to manually clean a clean copy of Element outerHTML.

Here’s what the print preview looks like:

Related implementation

This functionality is implemented in the table component GridManager in a slightly different way. Click here to view the source code