Recently because of the company’s single printing business needs to do some research on web front-end printing. Because browser printing related knowledge is relatively rare, many lovely people may not be very familiar with it, this blog is mainly on this period of literacy printing knowledge to do a record of sharing, hoping to help some lovely people do printing.

This article will discuss the knowledge of browser printing from three aspects:

1. Basic concepts of printing; 2. Introduction and advantages and disadvantages of browser printing; 3. Introduction to the printing style of browser printing;

The basic concept

What we often refer to as printing is simply displaying the contents of a document on a physical medium, such as paper. But there are continuous media and paging media, which control the presentation of the document’s content. Paging media, such as books, slides, PDFS, and so on, separate the document’s content into one or more unrelated pages.

In browsers, we know we can use CSS to control how the content of a document looks, so how do we control how the content of a document looks when it is printed? The answer is that we can still use CSS.

1. Physical media

Physical media paper page, divided into printable area and non-printable area. When we print, we display the contents of the document in the printable area.

So two things are clear here:

  1. Adjust the display of document contents in the printable area: this can be set through the user agent (print preview page);
  2. Non-printable area and printable area: this can be set by printer Settings;
  3. Document content display style: CSS to control;

2. Page model

The composition of a paper box: margins, borders, margins, content area, the same as CSS boxes.

  1. Content area: Used to display document content.
  2. Margin: Used to display header footer.

Page progress direction:

  1. This is the orientation of the page after the document is split. For example, the page progress direction of Chinese page is from left to right, while in ancient times, it is from right to left.
  2. This can be set using CSS: direction of the root element and writing-mode.

So how do you distinguish between horizontal and vertical?

  1. A paper page box is a rectangle with long and short sides. We determine the orientation of the page by the orientation of the long side. If the long side is vertical, we say the page is vertical, and vice versa.
  2. Vertical printing is when a document is printed with the narrow edge of the paper as the top. Horizontal printing is when the document is printed with the wide edge of the paper as the top.

Browser print

Printing in browsers has been around for a long time, so almost all browsers support it.

Print can be set up using window.print(), document.execcommand (‘print ‘), page right-click menu print, etc.

Differences between browsers: In Safari and Chrome, the print preview window pops up. FireFox doesn’t preview and lets you select a printer. OSx allows you to preview a PDF

However, although it is easy to use the browser to print directly, there are many problems, which cannot meet our printing needs:

  1. Print is the entire web page, can not print local content;
  2. The printing does not support custom pagination, and batch printing is not supported by default.
  3. Printing style problems, what you see is not what you get;
  4. The style units that can be accurately identified in printing are absolute units (such as PT, mm, cm). Recognizing different printers in relative units may get unexpected results.

1. Customize the printed content

The solution to problem 1, customizing print content, is already available in js libraries, such as jquery.print.js, which can be used if you introduce jquery into your project. Create an iframe, load the content and style to be printed, and call the iframe print event.

const printContentHtml = document.getElementById('print').innerHTML;

const iframe = document.createElement('the 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);
Copy the code

CSS Print Style

1. @ media print

So how do we control how we print content? Basically, we pass our print style to the printer, and there are three ways to import a print file.

// The first type: @mediaprint
@media print {
    body {
        background-color: white;
    }
    img {
        visibility: hidden;
    }
    a::after {
        content: "(" attr(href) ")"; }} // the CSS uses @import...print
@import url("my-print-style.css") print; // Use <Link> tag <Link rel= in HTML"stylesheet" media="print" href="My - print - style. CSS" >Copy the code

2, @ page

Used to set page size, margins, orientation, etc. You can use margin boxes inside @Page, similar to pseudo-classes.

@page { size: A4 portrait; /* */ margin: 3.7cm 2.6cm 3.5cm; /* Add a 1px gray line at the bottom of the page content area */ @bottom-left, @bottom-center, @bottom-right {border-top: 1px solid gray; } /* The middle display format of the footer is as follows"Page 3"*/ @bottom-center {content:"The first" counter(page) "Page"; }}Copy the code

Attribute Description:

  1. Margin: specifies the size of the page margin. Note that the unit of the property value cannot be em or ex.
  2. Size attribute: Auto, landscape, portrait, (such as 12cm 22cm) and (such as A4) are supported.
    • The default is Auto, which can be changed by the user agent;
    • Landscape specifies that the page is horizontal; if not, the page size is determined by the user agent;
    • Portrait specifies whether the page is portrait, or if not, the page size is determined by the user agent;
    • Length (such as 12cm 22cm) specifies the width and height of the page;
    • Page-size (for example, A4) can also specify the page size. The common values are A3, A4, A5, B4, B5, etc.
    • Page-size can be used in combination with landscape and portrait to specify page size and orientation;
  3. Pseudo-classes: support left, :right, :first, :blank
    • :left, :right: when double-sided printing is required, it is usually used to set different styles for the left and right pages (e.g. page number).
    • :first: used to match the first page of the document;
    • :blank: a blank page used to match a document;
    • Note ⚠️ : the different styles of the left and right pages are set in the code, which does not necessarily mean that double-sided printing will be performed in the user agent;
    • Note ⚠️ : a blank page can be either a left or right page. Setting the style of the left and right pages will also show up on the blank page if it is not necessary to be clear
/* @page :left {margin-left: 2.5cm; /* @page :left {margin-left: 2.5cm; Margin - right: 2.7 cm; } @page :right {margin-left: 2.7cm; Margin - right: 2.5 cm; }Copy the code

@ page application

[Set the direction of printing]

The default printing direction is portrait. You can use the CSS to set the printing direction to landscape

  • Horizontal @page {size: landscape; }
  • Portrait @page {size: portrait; } After the printing direction is set, the printing direction cannot be set again in the printing window of the browser.

[Set the type of paper to print]

The default paper type is A4, which can be set to other paper types through CSS, but which valid values are not particularly clear, this needs to be checked by your friends.

@page { size: A3; // A5, A4 or A3 }
Copy the code

If you want to set both the direction and the paper type,

@page { size: A3 landscape; }
Copy the code

[Set printing margins]

@page { margin: 1cm; }
Copy the code

[Set print header footer]

The default print will have a header footer. The header contains the date, title, and the footer contains information such as links and pages. Margin can be set to hide the header footer.

Margin-top: 0; margin-top: 0; margin-top: 0; Margin-bottom: 0; margin-bottom: 0; margin-bottom: 0; } // @page {margin: 0; }Copy the code

3, paging

Page-break-before, page-break-after, and page-break-inside the user controls the paging behavior of printing.

Attribute Description:

  1. Page-break-before, page-break-after: Auto, always, avoid, left, right, recto, and verso are supported.
    • Auto: default value. Paging is not forced or disabled.
    • Always, avoid: forces or disables paging before or after the element.
    • Recto and Verso: the page progress from left to right is consistent with right and left respectively; Conversely, it is consistent with left and right.
  2. Page-break-inside: Auto and avoid are supported. Indicates whether paging is allowed or disabled within an element.
thead, tfoot {
    display: table-row-group;
}
thead, tfoot, tr, th, td {
    page-break-inside: avoid;
}
Copy the code

Tips 🍒 : The above web front end printing, CSS can operate the printing Settings are described, want to popularize this part of the small partners can take a look at ha ！！！！！

Post warning

This article as a small white research browser printing enlightenment, the next small white will be based on this period of printing research summary of a current front-end printing solution, welcome interested partners to give a thumbs-up ！！！！