HTML with MathJax content => PDF, client-side only #1

New issue

Open

opened 2017-03-14 06:28:09 -07:00 by josephernest · 4 comments

josephernest commented

2017-03-14 06:28:09 -07:00

(Migrated from github.com)

Final goal: CTRL+P => triggers download of PDF

Problem: I am unable to render PDF for a page containing MathJax

Any idea @Purush0th ?

Final goal: CTRL+P => triggers download of PDF Problem: I am unable to render PDF for a page containing MathJax Related: http://stackoverflow.com/questions/42785850/render-mathjax-into-pdf, http://stackoverflow.com/questions/27706956/render-svg-to-pdf-using-jspdf Any idea @Purush0th ?

Purush0th commented

2017-03-14 22:26:56 -07:00

(Migrated from github.com)

Hi @josephernest

I tried different work around to export LaTex/Tex based TypeSettings. But current client side libs doesn't support these.

So one way is to output the mathematical expressions in SVG, Canvas or HTML/CSS format.

Mathjax.js supports the following output rendering format.

Common HTML
HTML & CSS
SVG
From MathJax Docs

Here SVG format uses foreignobject and it's not getting exported by SVG to canvas libraries.

Finally I tried HTML & CSS /Common HTML with html2canvas.js. It works but the quality of the output image is poor.

Check this fiddle here.
https://jsfiddle.net/Purushoth/0L9jf0gk/

You can check and see to improve this quality (or) try some other methods.

Good luck!!

Hi @josephernest I tried different work around to export LaTex/Tex based TypeSettings. But current client side libs doesn't support these. So one way is to output the mathematical expressions in SVG, Canvas or HTML/CSS format. Mathjax.js supports the following output rendering format. 1. Common HTML 2. HTML & CSS 3. SVG From [MathJax Docs](http://docs.mathjax.org/en/latest/output.html#mathjax-output-components) Here SVG format uses [foreignobject](https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject) and it's not getting exported by SVG to canvas libraries. Finally I tried HTML & CSS /Common HTML with html2canvas.js. It works but the quality of the output image is poor. Check this fiddle here. https://jsfiddle.net/Purushoth/0L9jf0gk/ You can check and see to improve this quality (or) try some other methods. Good luck!!

Purush0th commented

2017-03-15 01:13:43 -07:00

(Migrated from github.com)

I got another idea,

Lets get the content of input panel in text format and before exporting process the content and generate the PDF by code.

Get the input

`$('#wmd-input').val()`
   "Hi this is a formula $$x^2+1$$"

Use Regex to test whether it is a formula or text.

// write regex to test the string and formula

Add content to PDF based on the type.

a. If it's a formula like $$x^2+1$$ then use MathJax to render it in a hidden canvas and get the image. After add this image to the jsPDF doc.

           doc.addImage(imgData, 'PNG', x, y, width, height);

b. If it's a text add the text using

             doc.text(x, y, 'Hi this is a formula');

I got another idea, Lets get the content of input panel in text format and before exporting process the content and generate the PDF by code. 1. Get the input ````javascript `$('#wmd-input').val()` "Hi this is a formula $$x^2+1$$" ```` 2. Use Regex to test whether it is a formula or text. ````javascript // write regex to test the string and formula ```` 3. Add content to PDF based on the type. a. If it's a formula like `$$x^2+1$$` then use MathJax to render it in a hidden canvas and get the image. After add this image to the jsPDF doc. ````javascript doc.addImage(imgData, 'PNG', x, y, width, height); ```` b. If it's a text add the text using ````javascript doc.text(x, y, 'Hi this is a formula'); ````

josephernest commented

2017-03-15 01:56:21 -07:00

(Migrated from github.com)

@Purush0th : about your 2nd post: good idea !

Instead of 2. Use Regex, can't we parse all the MathJax content with "class" or something like that? (probably each rendered MathJax is a <span class="mathjax" or similar?)

Would you have a jsfiddle or a github fork showing this idea? This looks promising! Thanks in advance :)

@Purush0th : about your 2nd post: good idea ! Instead of `2. Use Regex`, can't we parse all the MathJax content with "class" or something like that? (probably each rendered MathJax is a `<span class="mathjax"` or similar?) Would you have a jsfiddle or a github fork showing this idea? This looks promising! Thanks in advance :)

josephernest commented

2017-03-15 01:58:17 -07:00

(Migrated from github.com)

@Purush0th : about your 1st post and this jsfiddle : isn't it possible to use SVG instead of PNG to keep the "vector" type instead of bitmap? Because with PNG here the output has quite bad quality.

@Purush0th : about your 1st post and [this jsfiddle](https://jsfiddle.net/Purushoth/0L9jf0gk/) : isn't it possible to use SVG instead of PNG to keep the "vector" type instead of bitmap? Because with PNG here the output has quite bad quality.