在页面中显示LaTeX数学公式

收藏

本帖最后由 David.Wang 于 2024-10-24 11:35 编辑

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

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

附Demo代码：

<!DOCTYPE html>
<html x: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">
<title>SpreadJS</title>
<link href="http://cdn.mescius.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.17.0.8.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="http://cdn.mescius.com/spreadjs/hosted/scripts/gc.spread.sheets.all.17.0.8.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook('ss');
var sheet = spread.getActiveSheet();
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.loatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
spread.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, function (evt, args) {
var output = args.element;
var input = output.innerHTML;
output.innerHTML = '';
MathJax.texReset();
var options = MathJax.getMetricsFor(output);
options.display = true;
MathJax.tex2chtmlPromise(input, options).then(function (node) {
output.appendChild(node);
MathJax.startup.document.clear();
MathJax.startup.document.updateDocument();
})
});
var output = document.createElement('div');
output.innerHTML = "x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.";
output.style.background = 'mintcream';
output.style.border = '1px solid green';
customFloatingObject.content(output)
sheet.floatingObjects.add(customFloatingObject);
}
</script>
</head>
<body style="margin:0;padding:0">
<div id="ss" style="width:100vw;height:95vh;border:1px solid darkgray;float:left"></div>
</body>
</html>

复制代码

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

不吐葡萄皮 · 不吐葡萄皮

Joestar.Xu · Joestar.Xu

		自动登录	找回密码
密码			立即注册

在页面中显示LaTeX数学公式

2 个回复

SpreadJS 认证

SpreadJS 高级认证