html页面前端展示数学公式+vue项目前端展示数学公式—

最近有同事在弄前端展示数学公式的功能，我也是头一次接触这个需求。所以也找了一些资料来找找答案。

网上提供的展示数学公式：都是用到MathJax这个

html页面展示数学公式——`MathJax.js`

最终效果如下：

使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body><div class="formula"><label>暴雨强度公式：</label>`i=A/(t+b)^n`<br><label>峰前降雨强度公式：</label>`i(t_b)=A[(1-n)*t/r+b]/[(t_b/r)+b]^(n+1)`<br><label>峰后降雨强度公式：</label>`i(t_a)=A[(1-n)*t_a/(1-r)+b]/[(t_a/(1-r))+b]^(n+1)`<br><label>备注：</label>`A=[A_1(1+ClgP)]/167`<br><label for="">勾股定理：</label> `a^2+b^2=c^2`</div>
</body>
</html>

步骤解析：

1.引入`MathJax.js`文件

网上有很多资源是不能用的了，下面的这个是可以用的……
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>

2.html中使用`MathJax.js`

在页面中使用时，直接用``包裹公式即可。非常的简单。。。

vue项目展示数学公式——`MathJax`

最终效果如下：

使用步骤如下：

1.在`vue`项目打包后生成的`index.js`文件中添加如下内容

只要是运行过npm run build后，都会在文件夹中生成一个public文件夹，里面会有index.html文件，这也就是vue被被称为SPA单页面框架的原因。

在index.html文件中的body标签下面引入MathJax.js文件
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2.在`src`文件夹中新建一个`MathJax.js`文件

这个文件的路径任意，我是放在了src/utils中。

MathJax.js文件内容如下：

let isMathjaxConfig = false; //用于标识是否配置
const initMathjaxConfig = () => {if (!window.MathJax) {return;}window.MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: "none", //不显示信息jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [["$", "$"],["\\(", "\\)"]], //行内公式选择符displayMath: [["$$", "$$"],["\\[", "\\]"]], //段内公式选择符skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签},"HTML-CSS": {availableFonts: ["STIX", "TeX"], //可选字体showMathMenu: false //关闭右击菜单显示}});isMathjaxConfig = true; //配置完成，改为true
};
const MathQueue = function(elementId) {if (!window.MathJax) {return;}window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};export default {isMathjaxConfig,initMathjaxConfig,MathQueue,
}

3.在`main.js`文件中引入`MathJax.js`文件

在main.js文件中引入MathJax.js文件，并挂载到vue的原型上。这叫全局引入。

import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax;

4.在需要的地方使用`MathJax.js`

//1.在data中定义数学公式，注意数学公式需要用**$$**签后包裹，中间才是公式内容
data(){return{question1: '$$借款本金=\\sum _{nT}^{i=1}\\frac{第i期支付金额}{1+年化综合成本}$$',question2: '$$i=A/(t+b)^n$$',question3: '$$i(t_b)=A[(1-n)*t/r+b]/[(t_b/r)+b]^(n+1)$$',question4: '$$i(t_a)=A[(1-n)*t_a/(1-r)+b]/[(t_a/(1-r))+b]^(n+1)$$',question5: '$$A=[A_1(1+ClgP)]/167$$',question6: '$$a^2+b^2=c^2$$',}
},
//在页面创建的时候调用methods中的formatMath的方法
created(){this.formatMath();
},
methods:{formatMath(){setTimeout(()=>{this.$nextTick(()=>{if(this.MathJax.isMathjaxConfig){this.MathJax.initMathjaxConfig();}//这个地方的hello是对应要渲染数学公式的dom的classthis.MathJax.MathQueue('hello');})},500)},
}

html部分代码如下：

<div class="hello" style="margin:0 auto;text-align:center;">{{ question1 }}<br><span class="spanCls"><span>暴雨强度公式：</span>{{question2}}</span><br><span class="spanCls"><span>峰前降雨强度公式：</span>{{question3}}</span><br><span class="spanCls"><span>峰后降雨强度公式：</span>{{question4}}</span><br><span class="spanCls"><span>备注：</span>{{question5}}</span><br><span class="spanCls"><span>勾股定理：</span>{{question6}}</span>
</div>

渲染效果如下：

在vue项目中使用MathJax时，需要注意的几点汇总如下：

需要在打包后的index.html文件中引入MathJax.js文件
需要在src文件夹中存放一个MathJax.js配置文件
需要在main.js中全局引入MathJax.js配置文件并挂载到vue原型上
需要在使用MathJax的地方，通过vue原型上的方法进行处理，并且需要注意数学公式的结构

完成！！！

补充：对比html页面的数学公式的展示与vue项目中的数学公式的展示，会发现有区别，前者除法公式是上下的布局，后者除法公式是直接横向展示。如果从容易理解的角度看，还是第一种会比较好。通过vue项目中的公式比对，发现如果要使得除法公式能够上下布局，则需要修改内容如下：

左右布局的除法公式写法
'$$i=A/(t+b)^n$$',
上下布局的除法公式写法
'$$i=\\frac{A}{(t+b)^n}$$',

如果需要将左右布局的除法公式写法改为上下布局的除法公式写法，则需要进行下面的改动：

在公式前面添加\\两个反斜杠
在分子部分前面添加frac并用{}包裹分子与分母部分

完成上面的操作后，公式就可以改变布局方式了
以上项目中的几个变量改动如下：

只要是需要改为上下布局的除法公式部分都需要进行上面的两步，哪怕公式中有多个除法，也是需要包裹多次\\frac{分子}{分母}

// question2: '$$i=\\frac{A}{(t+b)^n}$$',
question2: '$$i=A(t+b)^n$$',
// question3: '$$i(t_b)=A[(1-n)*t/r+b]/[(t_b/r)+b]^(n+1)$$',
question3: '$$i(t_b)=\\frac{A[(1-n)*\\frac{t}{r}+b]}{[(\\frac{t_b}{r})+b]^{n+1}}$$',
// question4: '$$i(t_a)=A[(1-n)*t_a/(1-r)+b]/[(t_a/(1-r))+b]^(n+1)$$',
question4: '$$i(t_a)=A\\frac{[(1-n)*\\frac{t_a}{(1-r)}+b]}{[(\\frac{t_a}{(1-r)})+b]^{n+1}}$$',
// question5: '$$A=[A_1(1+ClgP)]/167$$',
question5: '$$A=\\frac{[A_1(1+ClgP)]}{167}$$',
question6: '$$a^2+b^2=c^2$$',

最终效果如下：