If you could please link in your attempt and also your examples, it might be helpful when trying to troubleshoot.
To begin with the easiest: have you seen that you can download your current view to PNG just by clicking the three dots next to (left of) the map cell and selecting that option? Here’s a download I just took using this method after zooming in on the US Great Lakes:
If you’re looking for great control over printing options or print to PDF, here’s a start (using a notebook forked from one I linked in our other thread):
… It’s not fully working. The code is from the OpenLayers: Export PDF example page.
I think the part that I don’t have working correctly relates to this line:
import {toJpeg} from 'html-to-image;
In my notebook, I tried to get this working first by importing hmtl-to-image as follows:
html_to_image = require(‘html-to-image@0.1.1/lib/index.js’).catch(() => window["__importDefault"])
then, in place of the import {component} from approach, I tried html_to_image.toJpeg … but this might not be correct.
… if that’s not the issue, then my guess it’s either about the exportButton.addEventListener('click', function() { section, or it’s about how I linked dim to my vectorLayer (whereas this was a manually defined box in the OpenLayers.org example… and might be affecting the page size calculations).
Note that when you click the button, it gets disabled and the cursor shows ‘progress’ (as intended), but the download never happens.
Anyway… maybe a start? Would be fun to see where you got to! 
Hope this helps nudge things forward. I probably can’t be of much more help beyond this, so let’s hope someone else takes this on. Good luck!