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

最近有同事在弄前端展示数学公式的功能，我也是头一次接触这个需求。所以也找了一些资料来找找答案。网上提供的展示数学公式：都是用到MathJax这个html页面展示数学公式——MathJax.js最终效果如下：使用方法如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><met

yehaocheng520

10193人浏览 · 2021-07-07 12:53:02

yehaocheng520 · 2021-07-07 12:53:02 发布

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

网上提供的展示数学公式：都是用到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的class
	      this.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$$',