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

忘是亡心i 2022-10-13 12:56 428阅读 0赞

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

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

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

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
使用方法如下：

<!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` ##

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
使用步骤如下：

### 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`文件内容如下：

### 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>

渲染效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
在`vue`项目中使用`MathJax`时，需要注意的几点汇总如下：

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

完成！！！

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

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

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

1.  在公式前面添加`\\`两个反斜杠
2.  在分子部分前面添加`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$$',

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/5038fb3c3c6a422ea486d4c743294160.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/fef071fb24544a359c78dcf0f8bd0711.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/e33a917c8c9c46b89a8fb5f893e17331.png