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

[josephernest]

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]

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

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!!

[Purush0th]

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

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

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

// 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.

           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');

[josephernest]

@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]

@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.