CODEWITHSUNDEEP
htmlpdfprincexml
qed
qed

Reputation: 23104

Convert html containing mathjax markups to pdf

I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.

So I have a simple html file like this:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>


<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

</head>

<body>

$x^2 + y^2 = 1$

</body>
</html>

After conversion using princexml:

prince --javascript x.html -o x.pdf

the equation is rendered verbatim in the pdf.

Is there a way to make this work?

Upvotes: 4

Views: 3228

Answers (1)

Yaxhpal
Yaxhpal

Reputation: 101

This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:

  1. Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
  2. Second method is to use a headless browser like phantomjs. See also https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html

Upvotes: 6

Related Questions