I want to create multiple versions of print-friendly pages from a single page. I am considering to do it in this way: placing several buttons on the original page and, clicking one button will popup a new window with the same html as its parent window, but with some modifications (e.g., set display attribute of some DIV's to none).
You could pass an additional parameter to the current page's url and open it in a new window, like this:
window.open(document.location.href + "?print=true");
Speaking of which: Why not use a print-only CSS that does this for you? Then all you need to do in your code is:
And in your document HEAD:
<link rel="stylesheet" href="yourcssfile.css" media="print" />
And the CSS will make sure the page looks the way you want to in print. See this article for more about printing in CSS.
window.open('myPage.html') getElementById('<someid>').style.display = none
However, you may want to look into CSS print stylesheets, which allow to use CSS to specify the div hidings and whatnot. It has the advantage of not forcing the user to open a pop-up window and not taking the second page-load hit on your server. I found this article to be a good place to get started.
Basically, to add a print stylesheet you setup a link like this:
<link rel="stylesheet" type="text/css" media="print" href="myPrintStyles.css"/>
©2020 All rights reserved.