Topic: How to export as PDF or print <div> or <section> content ?
GuillaumeDgr pro premium asked 5 years ago
How to export as PDF or print or content ?
Mikołaj Smoleński staff answered 5 years ago
Hi there,
It's not an issue connected with MDB, but I personally recommend to use html2canvas in such case - https://html2canvas.hertzen.com/.
There is also a Vue version of this library - https://www.npmjs.com/package/vue-html2canvas.
Best regards
GuillaumeDgr pro premium answered 5 years ago
Thanks a lot, I did try to use both but all MDB components are not showing on final PDF... Best regards.
Mikołaj Smoleński staff commented 5 years ago
Which components exactly are not rendering? All of them?
GuillaumeDgr pro premium commented 5 years ago
I've tried again one of the above solutions you gave me, my code looks like : html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas)});
But result is that some of my MDB components are not rendering like mdb-icons, mdb-btn-fixed (or even images (img displaying custom object image url) or GoogleMap).. :/ Mdb-inputs (text, radio or checkbox) are rendering.
All of these are wrapped in same global first div with id='capture'.
Thks a lot for your help.
Mikołaj Smoleński staff commented 5 years ago
I guess it's rather issue with html2canvas than with MDB. I just can give a clue about icons: to render them in canvas most probably you will need to define new font-family for them. "Font Awesome 5" contains spaces which is not allowed in html2canvas.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: 6.6.0
- Device: Mac Book Pro
- Browser: Firefox Developers
- OS: MacOs
- Provided sample code: No
- Provided link: No