使用jsPDF生成PDF时MathJax公式渲染异常问题求助

问题现象 #

使用jsPDF结合MathJax生成包含数学公式的PDF时，网页端公式显示正常，但生成的PDF存在两个问题：

• 公式中的每个字符单独换行，无法保持连续排版
• 公式里的减号(-)无法正确渲染

原代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link rel="stylesheet" href="https://latex.now.sh/prism/prism.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

    <title></title>

</head>
<body>

    <div id="htmlcontent">
        <h1>Math Equation with MathJax</h1>
        <p>1/2 mole of NaCl and 1/2 mole \(MgCl_{2}\)</p>
        <p>Math Equation  \(-x^{2} + y^{3} = 10\)</p>
    </div>
    <button onclick="GenPDF();">Generate PDF</button>
    <script type="text/javascript">
        function GenPDF(){
        var doc = new jsPDF();
        doc.fromHTML(document.getElementById('htmlcontent'), 10, 10);
        doc.save('a4.pdf');
        }
    </script>
</body>
</html>

问题原因 #

1. jsPDF 1.x版本的fromHTML方法对MathJax生成的CHTML（HTML+CSS）结构支持不足，无法识别公式元素的连续排版逻辑，导致字符被逐个拆分换行。
2. 旧版jsPDF对特殊符号的字体映射处理不完善，减号等符号无法正确转换为PDF支持的字符。

解决方案 #

方案一：使用新版jsPDF + html2canvas #

新版jsPDF推荐使用html()方法，依赖html2canvas将HTML内容转为Canvas，再生成PDF，对复杂HTML结构的支持更好。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link rel="stylesheet" href="https://latex.now.sh/prism/prism.css">

    <!-- 引入新版jsPDF和html2canvas -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <title></title>

</head>
<body>

    <div id="htmlcontent">
        <h1>Math Equation with MathJax</h1>
        <p>1/2 mole of NaCl and 1/2 mole \(MgCl_{2}\)</p>
        <p>Math Equation  \(-x^{2} + y^{3} = 10\)</p>
    </div>
    <button onclick="GenPDF();">Generate PDF</button>
    <script type="text/javascript">
        // 从umd模块中获取jsPDF
        const { jsPDF } = window.jspdf;

        async function GenPDF(){
            const doc = new jsPDF();
            // 使用html方法生成PDF，设置参数确保内容完整
            await doc.html(document.getElementById('htmlcontent'), {
                callback: function(doc) {
                    doc.save('a4.pdf');
                },
                x: 10,
                y: 10
            });
        }
    </script>
</body>
</html>

方案二：切换MathJax为SVG输出模式 #

MathJax的SVG输出会将公式转为矢量SVG图形，jsPDF对SVG的支持更稳定，避免字符拆分和符号渲染问题。

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- 切换为SVG输出的MathJax脚本 -->
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>
    <link rel="stylesheet" href="https://latex.now.sh/prism/prism.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <title></title>

</head>
<body>

    <div id="htmlcontent">
        <h1>Math Equation with MathJax</h1>
        <p>1/2 mole of NaCl and 1/2 mole \(MgCl_{2}\)</p>
        <p>Math Equation  \(-x^{2} + y^{3} = 10\)</p>
    </div>
    <button onclick="GenPDF();">Generate PDF</button>
    <script type="text/javascript">
        const { jsPDF } = window.jspdf;

        async function GenPDF(){
            const doc = new jsPDF();
            await doc.html(document.getElementById('htmlcontent'), {
                callback: function(doc) {
                    doc.save('a4.pdf');
                },
                x: 10,
                y: 10
            });
        }
    </script>
</body>
</html>

效果验证 #

两种方案均可解决公式字符换行和减号渲染问题，生成的PDF中公式排版与网页端一致，符号显示正常。

内容的提问来源于stack exchange，提问作者AbdulR