jsPDF unable to render minus sign from html and mathjax

1 year ago

#376928

Jonathan

I've been trying to create PDF documents with equations via jsPDF, html2canvas and MathJax.

The equation will be displayed in HTML, and then rendered via mathjax to look like a mathematical equation. Later on, the HTML code of the rendered equation will be transferred into a new PDF file via the html() method of the jsPDF library. This method takes HTML code and puts it in a PDF file.

For some reason, jsPDF replaces each minus sign (-) with a quotation mark (").

I added a demo test for you to see the problem, here is an additional link for it codepen:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- jsPDF - for generating pdf files !-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

    <!-- HTML2Canvas - for generating PDF documents with math syntax !-->
    <script crossorigin="anonymous"
            integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
            referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
      MathJax = {
        tex2jax: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"]
          ],
          displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"]
          ]
        }
      };


    </script>
    <style>
    mjx-container mjx-math {
    white-space: normal;
}

    </style>
    <script
            async
            id="MathJax-script"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"
    ></script>

    <title>Document</title>
</head>
<body>
<div id="mathExample">$ -3x^2 + 5 $</div>
<button id="myButton" onclick="createPDF()">Create a PDF document</button>
</body>
<script>
window.jsPDF = window.jspdf.jsPDF;
    function createPDF(){
        var mathExample = document.querySelector("#mathExample");
        var doc = new jsPDF();
        doc.html(mathExample, {
        callback: function(doc) {
            doc.save("output.pdf");
        },
        x: 15,
        y: 15
    });

    }


</script>
</html>

Here is an example for the mathjax equations in the actual application i'm building:

And this is how they are shown in the PDF file

What am I missing here? Thanks for any help I'm desperate

EDIT: As suggested, it turns out that MathJax also appends style tags when rendering equations. However, when I try adding a style tags to the pdf file jsPDF just crashes and I get the error: "Could not load dompurify"

Edit: It turns out that you have to load the font and style by your own, as Davide Cervone pointed out in the comments, and also added a link to a github example.

This is the final PDF file. Important to mention, stuff like matrices don't really work at least in this way, since the brackets stay small.

javascript

html

jquery

jspdf

mathjax

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs