Method 1
var html;
//You can use the template engine for rendering
//For example html = template.render("today-task-list-print-template",data);
//Or use Jquery or native Js to select what you want to print Part
//Such as html = $("#print-content").html();
var newWin = window.open('', '_self', ''); //Open a new window on the current page
newWin.document .write("<head><style>#print-content{font-size:14px}</style></head>"); //Add css style to new window
newWin.document.write(html);
newWin .print();
newWin.location.reload(); //Reload to restore the window to the state before printing Advantages
and disadvantages : When
no new tab page or pop-up window
is reloaded, the page will be refreshed again. The operation will be reset Method 2 var html; //do something to html var newWin = window.open('', '', '');
newWin.document.write("<head><style>#print-content{font-size:14px}</style></head>");
newWin.document.write(html);
newWin.print();
newWin.close(); //Close the newly generated tab Advantages
and disadvantages
A new tab will be generated. When the user directly closes the tab without selecting print or cancel, the original page cannot be refreshed.
After the user completes the printing operation, The new page closes and returns to the pre-print page without waiting for page load time.
Method 3
@media print {
.no-print{display:none;}
uses the media query function @media of CSS. Hide the unnecessary ones displayed in the printed page to achieve the effect of printing the specified area.
Advantages and Disadvantages
No additional JS code
is required. It is cumbersome when there are many parts to be hidden.
Commonly used css
settings in printing print paper size and margins
@page {
margin: 14mm 18mm 10mm;
size: 20.1cm 29.7cm;//You can also directly write the international standard size size: A4;
}
Prevent elements from being cut by paper
page-break -inside: avoid;
keep the element at the top of the page
page-break-before: always;
How to print the top content of a webpage
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326616773&siteId=291194637
Recommended
Ranking