请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

David.Wang

超级版主

6

主题

8

帖子

60

积分

超级版主

Rank: 8Rank: 8

积分
60
  • 252

    金币

  • 6

    主题

  • 8

    帖子

David.Wang
超级版主   /  发表于:2024-10-24 11:32  /   查看:73  /  回复:2
本帖最后由 David.Wang 于 2024-10-24 11:35 编辑

场景:需要在某些区域显示用LaTeX编写的数学公式

方案:借助 MathJax 实现
image.png930783386.png

附Demo代码:
  1. <!DOCTYPE html>
  2. <html x:lang="en">

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>SpreadJS</title>
  8.     <link href="http://cdn.mescius.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.0.8.css" rel="stylesheet"
  9.         type="text/css" />
  10.     <script type="text/javascript"
  11.         src="http://cdn.mescius.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.8.min.js"></script>

  12.     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>


  13.     <script>
  14.         window.onload = function () {
  15.             var spread = new GC.Spread.Sheets.Workbook('ss');
  16.             var sheet = spread.getActiveSheet();
  17.             var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.loatingObject("f0");
  18.             customFloatingObject.startRow(1);
  19.             customFloatingObject.startColumn(1);
  20.             customFloatingObject.endColumn(6);
  21.             customFloatingObject.endRow(6);
  22.             spread.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, function (evt, args) {
  23.                 var output = args.element;
  24.                 var input = output.innerHTML;
  25.                 output.innerHTML = '';
  26.                 MathJax.texReset();
  27.                 var options = MathJax.getMetricsFor(output);
  28.                 options.display = true;

  29.                 MathJax.tex2chtmlPromise(input, options).then(function (node) {
  30.                     output.appendChild(node);
  31.                     MathJax.startup.document.clear();
  32.                     MathJax.startup.document.updateDocument();
  33.                 })
  34.             });

  35.             var output = document.createElement('div');
  36.             output.innerHTML = "x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.";
  37.             output.style.background = 'mintcream';
  38.             output.style.border = '1px solid green';
  39.             customFloatingObject.content(output)
  40.             sheet.floatingObjects.add(customFloatingObject);
  41.         }
  42.     </script>
  43. </head>

  44. <body style="margin:0;padding:0">
  45.     <div id="ss" style="width:100vw;height:95vh;border:1px solid darkgray;float:left"></div>
  46. </body>

  47. </html>
复制代码

MathJax项目仓库:https://github.com/mathjax/MathJax#readme

2 个回复

倒序浏览
不吐葡萄皮
注册会员   /  发表于:2024-10-24 16:42:49
沙发
  
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-10-24 17:25:10
板凳
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部