Do you want to reward learners with a certificate when they successfully complete a course? Then download this certificate of completion template to use in your own projects. This template uses the ...
Published 3 years ago
Version 1.0
Blog Post
Got it to work, but even on landscape certificate only prints about 40% size. Is there a way to set it to maximize print area on page?
- I have the same
- I love template a lot, but I have the same issue. Thank you, Sarah
- Great template! Just wondering if there is a solution/work-around so that it prints full page. Thank you!
- i know this is a year old,
But try this:
try this java code as a trigger for the print:
var styles = `
@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(1) !important; # Adjusted scale to 1 (no zoom)
}
#wrapper {
transform: scale(1) !important;
}
#slide,
#wrapper {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
#frame {
overflow: visible !important;
}
.slide-transition-container {
overflow: visible !important;
}
@page {
size: A4 landscape;
max-height: 99%;
max-width: 99%;
}
.slide-container, .slide-container * {
visibility: visible !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
#outline-panel {
display: none !important;
}
}
`;
var stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerText = styles;
document.head.appendChild(stylesheet);
window.print();This is so helpful! Do you have any tips on getting the sizing right? I am using letter-sized paper, and it isn't quite right. I've tried changing the scale, but it is too small at .88 and too large at .95. This is my first time playing with java script. I've had a frustrating afternoon trying to generate a certificate; this is the closest I've come!
Hello Heather!
same as you I had a hard time getting it "good enough" to print better, so this was the closet code I can get to making it print great.
i am not a coding expert but (know a little bit), here is a revised version:var styles = ` @media print { body, * { visibility: hidden; } html, body { overflow: hidden; transform: translateZ(0); } #slide { transform: scale(1) !important; /* Adjusted scale to 1 (no zoom) */ } #wrapper { transform: scale(1) !important; } #slide, #wrapper { width: 100% !important; height: 100% !important; overflow: visible !important; } #frame { overflow: visible !important; } .slide-transition-container { overflow: visible !important; } @page { size: letter landscape; max-height: 99%; max-width: 99%; } .slide-container, .slide-container * { visibility: visible !important; margin-top: 0px !important; margin-left: 0px !important; } #outline-panel { display: none !important; } } `; var stylesheet = document.createElement('style'); stylesheet.type = 'text/css'; stylesheet.innerText = styles; document.head.appendChild(stylesheet); window.print();
This code sets the page size to letter landscape. If you still find the sizing isn’t quite right, you might need to tweak the transform: scale(1) values slightly. For example, you could try transform: scale(0.9) or transform: scale(0.95) to see if it fits better.
