Printable Article Template
Printable Article Template [Edit Title Here]
<div id="print-wrapper" style="border-radius: 8px; border: 1px solid rgb(204, 204, 204); color: #111111; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.45; margin: 16px auto; max-width: 900px; padding: 20px;">
<div style="align-items: center; border-bottom: 1px solid rgb(224, 224, 224); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px;">
<h1 style="color: #2c3e50; font-size: 24px; margin: 0px;">Printable Article Template [Edit Title Here]</h1>
<button id="print-article-btn" style="background: rgb(247, 247, 247); border-radius: 6px; border: 1px solid rgb(68, 68, 68); cursor: pointer; font-weight: bold; padding: 6px 12px;" type="button">🖨️ Print / Save as PDF</button>
</div>
<div id="printable-content">
<p>
[PASTE Content HERE]
</p>
<script>
(function () {
var btn = document.getElementById('print-article-btn');
if (!btn) return;
btn.addEventListener('click', function () {
var src = document.getElementById('printable-content');
if (!src) return;
var clone = src.cloneNode(true);
var fr = document.createElement('iframe');
fr.setAttribute('aria-hidden', 'true');
fr.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
document.body.appendChild(fr);
var doc = fr.contentDocument || fr.contentWindow.document;
doc.open();
// Writes the HTML structure and necessary print styles into the print window
doc.write('<!doctype html><html><head><meta charset="utf-8"><title>Print Article</title>');
doc.write('<style>@page{margin:15mm;}body{font-family:Georgia,Times New Roman,serif; line-height:1.6; color:#000; margin:0; padding:0;}h1,h2,h3{font-family:Helvetica Neue,Arial,sans-serif;}a{word-break:break-all; text-decoration:none; color:#000;}hr{border:none; border-top:1px solid #e0e0e0; margin:15px 0;}div{padding: 20px;}</style>');
doc.write('</head><body>');
doc.write(clone.outerHTML);
doc.write('</body></html>');
doc.close();
var w = fr.contentWindow;
w.focus();
w.addEventListener('afterprint', function(){ setTimeout(function(){ document.body.removeChild(fr); }, 100); }, { once:true });
w.print();
});
})();
</script>
</div></div>
Comments