search

froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
562 stars 130 forks source link

Export to pdf not working in react, Uncaught TypeError: Cannot read property 'canvas' #142

Open ChakirBelhaj opened 5 years ago

ChakirBelhaj commented 5 years ago

The export to pdf button in ReactJS-Froala editor does not work and is not displaying any errors at all.

Edit The React editor is missing the html2pdf library by default, I had to install html2pdf library and import it above my Froala-editor imports. Sadly after importing the html2pdf library, a console error occurred while trying to download the pdf file.

` jspdf.min.js:7388 Uncaught TypeError: Cannot read property 'canvas' of undefined at Object.html2pdf (jspdf.min.js:7388)

at Object.toPDF (froala_editor.pkgd.min.js:10961)

at s.callback (froala_editor.pkgd.min.js:10990)

at Object.t [as exec] (froala_editor.pkgd.min.js:3766)

at r (froala_editor.pkgd.min.js:4598)

at t (froala_editor.pkgd.min.js:4630)

at s.a (froala_editor.pkgd.min.js:4634)

at froala_editor.pkgd.min.js:437

at HTMLButtonElement.<anonymous> (froala_editor.pkgd.min.js:441)

at HTMLButtonElement.r (froala_editor.pkgd.min.js:355)

at HTMLDivElement.dispatch (jquery.js:4586)

at HTMLDivElement.elemData.handle (jquery.js:4406)`
tomzagorski commented 5 years ago

I am experiencing the same issue and have not been able to find a fix. The workaround I'm currently going with is to select PDF when printing.

HarishSha commented 3 years ago

Same here.. not working.. any idea how to fix it

lorstenoplo commented 3 years ago

Facing the same issue

herbertharriola commented 3 years ago

Have you got any way to fix it!? i am having the same issue!!

ChakirBelhaj commented 3 years ago

I used another package to convert the HTML to pdf "html2pdf.js": "0.8.0", but sadly the package has a lot of issues. https://www.npmjs.com/package/html2pdf.js/v/0.8.0. I honestly would recommend converting the HTML to pdf format by using a back-end library.

import * as html2pdf from "html2pdf.js";

Good luck!

herbertharriola commented 3 years ago

and which backend library are you using!? i saw the one called html-to-pdf but it doesn't recognize thigs like line-height or font-family

ChakirBelhaj commented 3 years ago

There are many libraries, I have no clue which one would suit your particular use case, In my case, I used the javascript one.

Note that most back-end libraries require a license.

Try looking at https://www.dynamicpdf.com/