Bookmarklet to selectively print areas of web page

This bookmarklet when clicked will let you select (multiple) custom sections of the current web page with shortcut combo Alt+left-mouse-click, then press Enter to Print just those sections.

It'll show you which sections can be selected by highlighting the border of a section blue, as you hover with the mouse. The border turns red if you Alt+click it.

A little HUD menu pops up top right to show the keyboard shortcut keys.

There are two ways you can save this bookmarklet to use yourself.

1. Either drag this link -> Selective-Print-bookmarklet <- to your bookmarks toolbar.
   
   
2. Or make a normal browser bookmark of this web page (can be any page because you're going to change the link, but this page will do). Then edit the bookmark and replace the entire link with the javascript string in the text box below. It's this javascript that does the bookmarklet magic:

Copy javascript from here with the Copy button, or triple click, then Ctrl+C 

javascript:(()=>{const W=window;if(W.__CLEAN_PRINT__){W.__CLEAN_PRINT__.off();return;}const HIDE="data-cp-hide",SEL="data-cp-sel",PRINT_ROOT="__cpPrintRoot";const S={hover:null,style:null,hud:null,stack:[],targets:[],off:null};const isEl=x=>x&&x.nodeType===1;const isSelected=el=>isEl(el)&&el.getAttribute(SEL)==="1";const isHidden=el=>isEl(el)&&el.getAttribute(HIDE)==="1";const unhover=()=>{if(!S.hover)return;const el=S.hover;if(!isSelected(el))el.style.outline=el.__cpOldOutline||"";delete el.__cpOldOutline;S.hover=null;};const markOutline=el=>{if(!isEl(el)||el===document.body||el===document.documentElement)return;unhover();S.hover=el;el.__cpOldOutline=el.style.outline||"";if(isSelected(el)){el.style.outline="3px solid #d00";return;}el.style.outline=isHidden(el)?"2px dashed #d00":"2px solid #06c";};const applySel=el=>{el.__cpOldSelOutline=el.style.outline||"";el.style.outline="3px solid #d00";el.setAttribute(SEL,"1");};const clearSel=el=>{el.removeAttribute(SEL);if(el.__cpOldSelOutline!==undefined){el.style.outline=el.__cpOldSelOutline;delete el.__cpOldSelOutline;}else{el.style.outline="";}};const coveringSel=el=>S.targets.find(t=>t!==el&&isEl(t)&&t.contains(el));const flashNested=el=>{const o=el.style.outline||"";el.style.outline="2px dotted #d00";setTimeout(()=>{if(!isSelected(el))el.style.outline=o;},700);};const addTarget=el=>{if(!S.targets.includes(el))S.targets.push(el);};const removeTarget=el=>{S.targets=S.targets.filter(x=>x!==el);};const toggleSelect=el=>{if(!isEl(el))return;const cover=coveringSel(el);if(cover){flashNested(el);return;}if(isSelected(el)){S.stack.push({type:"sel",mode:"remove",el});clearSel(el);removeTarget(el);updateHud();return;}const removed=[];for(const t of [...S.targets]){if(isEl(t)&&el.contains(t)&&t!==el){removed.push(t);clearSel(t);removeTarget(t);}}S.stack.push({type:"sel",mode:"add",el,removed});applySel(el);addTarget(el);updateHud();};const toggleHide=el=>{if(!isEl(el))return;const was=isHidden(el);S.stack.push({type:"hide",el,was});if(was){el.removeAttribute(HIDE);el.style.opacity=el.__cpOldOpacity||"";delete el.__cpOldOpacity;}else{el.setAttribute(HIDE,"1");el.__cpOldOpacity=el.style.opacity||"";el.style.opacity="0.25";}updateHud();};const clearHides=()=>{document.querySelectorAll(`[${HIDE}="1"]`).forEach(el=>{el.removeAttribute(HIDE);if(el.__cpOldOpacity!==undefined){el.style.opacity=el.__cpOldOpacity;delete el.__cpOldOpacity;}else{el.style.opacity="";}});S.stack.push({type:"clearH"});updateHud();};const clearSelections=()=>{for(const el of [...S.targets]){if(isEl(el))clearSel(el);}S.targets=[];S.stack.push({type:"clearS"});updateHud();};const undo=()=>{const a=S.stack.pop();if(!a)return;if(a.type==="hide"){const el=a.el;if(!isEl(el))return;if(a.was){el.setAttribute(HIDE,"1");if(el.__cpOldOpacity===undefined)el.__cpOldOpacity=el.style.opacity||"";el.style.opacity="0.25";}else{el.removeAttribute(HIDE);el.style.opacity=el.__cpOldOpacity||"";delete el.__cpOldOpacity;}}else if(a.type==="sel"){const el=a.el;if(!isEl(el))return;if(a.mode==="add"){if(isSelected(el)){clearSel(el);removeTarget(el);}if(Array.isArray(a.removed))for(const r of a.removed){if(isEl(r)&&!isSelected(r)){applySel(r);addTarget(r);}}}else if(a.mode==="remove"){if(!isSelected(el)){applySel(el);addTarget(el);}}}updateHud();};const ensureStyle=()=>{if(S.style)return;S.style=document.createElement("style");S.style.textContent=`@media print{body>*:not(#${PRINT_ROOT}){display:none!important;}#${PRINT_ROOT}{display:block!important;margin:0!important;padding:0!important;}#${PRINT_ROOT} *{outline:none!important;box-shadow:none!important;}[${HIDE}="1"]{display:none!important;visibility:hidden!important;}#__cpHud{display:none!important;}}`;document.head.appendChild(S.style);};const removePrintRoot=()=>{const ex=document.getElementById(PRINT_ROOT);if(ex)ex.remove();};const buildPrintRoot=()=>{removePrintRoot();const root=document.createElement("div");root.id=PRINT_ROOT;root.style.display="none";const sorted=[...S.targets].filter(isEl).sort((a,b)=>{if(a===b)return 0;const p=a.compareDocumentPosition(b);if(p&Node.DOCUMENT_POSITION_FOLLOWING)return -1;if(p&Node.DOCUMENT_POSITION_PRECEDING)return 1;return 0;});for(const el of sorted){const wrap=document.createElement("div");wrap.style.cssText="break-inside:avoid;page-break-inside:avoid;";const c=el.cloneNode(true);c.removeAttribute(SEL);c.style.outline="";c.style.boxShadow="";wrap.appendChild(c);root.appendChild(wrap);}document.body.prepend(root);};const pickEl=e=>{let el=e.target;if(!isEl(el))return null;if(e.shiftKey&&el.parentElement)el=el.parentElement;return el;};const updateHud=()=>{if(!S.hud)return;S.hud.querySelector("#__cpHidden").textContent=String(document.querySelectorAll(`[${HIDE}="1"]`).length);S.hud.querySelector("#__cpSelCount").textContent=String(S.targets.length);};const makeHud=()=>{const d=document.createElement("div");d.id="__cpHud";d.style.cssText="position:fixed;top:10px;right:10px;z-index:2147483647;background:#fff;border:1px solid #999;border-radius:10px;padding:10px;font:12px/1.35 system-ui,Segoe UI,Arial;box-shadow:0 2px 10px rgba(0,0,0,.2);max-width:900px;color:#111;white-space:nowrap;";d.innerHTML=`<span style="font-weight: 600;">Clean Print</span> <span style="margin-left: 8px;">Hide marked: <span id="__cpHidden">0</span> | Selected: <span id="__cpSelCount">0</span></span> <span style="color: #333333; margin-left: 10px;">Click hide/unhide · Shift+Click parent · Alt+Click toggle select · Enter print (DOM) · U/Ctrl+Z undo · C clear hides · T clear selections · Esc exit</span>`;document.body.appendChild(d);S.hud=d;updateHud();};const onOver=e=>{const el=pickEl(e)||e.target;markOutline(el);};const onOut=()=>unhover();const onClick=e=>{e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();const el=pickEl(e);if(!el)return;if(e.altKey)toggleSelect(el);else toggleHide(el);};const onKey=e=>{if(e.key==="Escape"){S.off();return;}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="z"){e.preventDefault();undo();return;}if(e.key==="u"||e.key==="U"){undo();return;}if(e.key==="c"||e.key==="C"){clearHides();return;}if(e.key==="t"||e.key==="T"){clearSelections();return;}if(e.key==="Enter"){if(S.targets.length===0){alert("No sections selected. Alt+Click sections to select/deselect.");return;}ensureStyle();buildPrintRoot();const cleanup=()=>{removePrintRoot();W.removeEventListener("afterprint",cleanup,true);};W.addEventListener("afterprint",cleanup,true);W.print();}};const off=()=>{try{document.removeEventListener("mouseover",onOver,true);document.removeEventListener("mouseout",onOut,true);document.removeEventListener("click",onClick,true);document.removeEventListener("keydown",onKey,true);}catch(_){ }unhover();removePrintRoot();if(S.hud)S.hud.remove();if(S.style)S.style.remove();document.querySelectorAll(`[${HIDE}="1"]`).forEach(el=>{el.removeAttribute(HIDE);if(el.__cpOldOpacity!==undefined){el.style.opacity=el.__cpOldOpacity;delete el.__cpOldOpacity;}else{el.style.opacity="";}});for(const el of [...S.targets]){if(isEl(el))clearSel(el);}S.targets=[];delete W.__CLEAN_PRINT__;try{document.body.style.cursor="";}catch(_){}};S.off=off;document.body.style.cursor="crosshair";makeHud();document.addEventListener("mouseover",onOver,true);document.addEventListener("mouseout",onOut,true);document.addEventListener("click",onClick,true);document.addEventListener("keydown",onKey,true);W.__CLEAN_PRINT__=S;})();

Enjoy