Angular项目中如何在TS文件生成MathJax SVG以生成含公式PDF

1. 配置MathJax支持程序化生成SVG #

首先确保Angular项目中MathJax可以在TypeScript里直接调用API生成SVG，无需依赖DOM渲染。

在angular.json的scripts中引入MathJax的SVG输出模块：

"scripts": [
  "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"
]

也可以本地安装MathJax后引入本地文件，避免CDN依赖。

然后在组件TS文件中声明全局MathJax变量：

declare const MathJax: any;

2. 封装LaTeX转SVG的异步方法 #

写一个工具方法，输入LaTeX公式字符串，调用MathJax API生成对应的SVG代码：

async latexToSvg(latex: string, isBlock = false): Promise<string> {
  const renderOptions = {
    display: isBlock, // 块级公式设为true，行内设为false
    svg: {
      fontCache: 'global' // 复用字体缓存，减少重复体积
    }
  };

  // 调用MathJax的异步渲染方法
  const svgElement = await MathJax.typesetPromise([latex], renderOptions);
  // 将SVG DOM元素转为字符串
  return svgElement.outerHTML;
}

3. 批量处理试卷中的所有公式 #

假设你的试卷数据是包含题目的数组，每个题目含latexFormula字段存储公式，批量替换为SVG：

async preparePdfContent() {
  const allQuestions = this.paperApi.getFullPaper(); // 获取完整试卷数据
  let pdfHtmlContent = '';

  for (const question of allQuestions) {
    // 渲染当前题目的LaTeX为SVG
    const formulaSvg = await this.latexToSvg(question.latexFormula, true);
    // 拼接题目HTML（包含标题、SVG公式等）
    const questionHtml = `
      <div class="question-item">
        <h3>${question.title}</h3>
        <div class="formula">${formulaSvg}</div>
        <p>${question.description}</p>
      </div>
    `;
    pdfHtmlContent += questionHtml;
  }

  // 生成PDF
  this.buildPdf(pdfHtmlContent);
}

4. 集成pdfMake生成最终PDF #

pdfMake支持直接嵌入SVG字符串，若存在兼容问题，可将SVG转为base64格式后作为图片插入：

// SVG转base64工具方法
svgToBase64(svgStr: string): string {
  const encodedStr = encodeURIComponent(svgStr);
  return `data:image/svg+xml;charset=utf-8,${encodedStr}`;
}

// 生成PDF
buildPdf(htmlContent: string) {
  const docDefinition = {
    content: [
      { html: htmlContent }
    ],
    // 优化配置：缩小边距、统一字体减少体积
    pageSize: 'A4',
    pageMargins: [15, 15, 15, 15],
    defaultStyle: {
      font: 'Roboto'
    }
  };

  pdfMake.createPdf(docDefinition).download('数学试卷.pdf');
}

5. 大体积PDF优化建议 #

• 开启MathJax的全局字体缓存，避免每个SVG重复嵌入字体数据
• 用SVGO工具压缩生成的SVG代码，移除冗余标签和属性
• 试卷中的图片提前压缩到合适分辨率，避免高清图增大体积

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