How to export as PDF or print or content ?


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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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