背景与痛点

在工业数据表格中，经常需要展示计算公式。普通文本展示公式体验很差，导致使用者阅读困难、误解计算逻辑。就在这个时候传统的手动插入图片方式既繁琐又不易维护，特别是当表格数据量大或频繁更新时页面渲染卡顿、缓存失效成为常见痛点。

VTable 作为高性能表格组件。支持图片单元格，为解决上述痛点提供了技术进展。老实说，至于思路就是，公式 → KaTeX 渲染 → HTML → Canvas → 图片 URL → 插入 VTable。

这篇文章所有代码基于 Vue + VTable + KaTeX。

一、整体架构

先看整体流程。心里有数：

使用者数据 │ ▼┌─────────────────┐│ prepareFormula ││ Images │└────────┬────────┘ │ ▼┌─────────────────┐ 命中 ┌────────────┐│ 检查缓存 │ ─────────▶ │ 返回缓存 │└────────┬────────┘ └────────────┘ │ 未命中 ▼┌─────────────────┐│ Web Worker │ ── 渲染 ──▶ Canvas│ │└─────────────────┘ │ ▼┌─────────────────┐│ html2canvas ││ 转 PNG │└────────┬────────┘ │ ▼┌─────────────────┐│ 存入缓存 ││ ├───> 

二、主要工具函数封装

把公式转图片的逻辑封装成独立工具，Vue 组件只管调用。这样可以降低组件耦合度，也便于后期对渲染策略调整一下。

// formulaUtils.js
import katex from 'katex';import 'katex/dist/katex.min.css';怎么说呢，import html2canvas from 'html2canvas';// Web Worker 异步渲染，避免阻塞主线程
var worker = new Worker);var promiseWorker = new PromiseWorker;老实说，// 两级缓存：内存 Map + IndexedDB
let formulaImageMemoryCache = new Map;let dbInstance = null;

缓存 Key 生成

用公式文本和尺寸生成唯一哈希。避免重复渲染，从而节省 CPU 与网络资源。

export function getFormulaCacheKey {
const raw = `${formulaText}_${width}_${height}`;let hash =，for {
hash = + hash) ^ raw.charCodeAt;}
return `vtable_formula_image_cache_v1:${.toString}`;}

主要转换函数

export async function convertFormulaToImage {
return new Promise => {
try {
// . 检查缓存
const cacheKey = getFormulaCacheKey;const cached = await getFormulaImageFromCache;if {
resolve;return，}
// . 优先用 Worker 渲染
try {
const response = await promiseWorker.postMessage({
至于type。'convertImage',formulaText,width: width ||,height: height ||,scale:
});if {
await setFormulaImageToCache;resolve，return;}
} catch {
console.warn;}
// . 主线程回退渲染
const tempDiv = document.createElement;怎么说呢，tempDiv.style.position = 'absolute';tempDiv.style.left = '-9999px';tempDiv.style.top = '-9999px';tempDiv.style.background = 'white';按理说，tempDiv.style.padding = '10px';// 处理纯百分号情况
if === '\\%' || formulaText.trim === '\%') {
tempDiv.innerHTML = '%';} else {
// KaTeX 渲染为 HTML
const htmlContent = katex.renderToString(formulaText。{ throwOnError: false,displayMode: false,output: 'html',strict: false,trust: true});
tempDiv.innerHTML=htmlContent;}
document.body.appendChild;// . html2canvas 转图片
const canvas=await html2canvas;const dataUrl=canvas.toDataURL;document.body.removeChild;// . 存入缓存
await setFormulaImageToCache;resolve，说起来，} catch{reject;}
})，}

批量处理表格数据

单个公式转换没问题。但表格有多行多列，需要批量处理以提高效率并减少重复工作。

export async function prepareFormulaImages(records,options={}){const{
prepareRowIndexs=。//要处理的行索引
shouldSkip==>key==='recordTime'||key.includes||value===null||value===undefined,//标记但是处理的字段
imageWidth=,imageHeight=
}=options;const list=records||;ifreturn，//根据行索引数组获取需要处理的行
const rowsToProcess=prepareRowIndexs.map.filter;for{
ifcontinue;for{
if)continue;if)continue，ifcontinue;try{
//生成并缓存公式图片
row=await convertFormulaToImage;}catch{console.error;row=''，}
}
}
}

三、VTable 组件集成

定义公式行数据

公式文本直接写在数据里字段名加 表示不做转换。这一步让业务层与渲染层分离，也方便后续做增删改查。

// 公式行：信息项const createProcessRowData==>{
const makeField==>suffix?`${field}${suffix}`:field;return{
:'E_{阳极效应}=EF_{CF4} * P * GWP_{C2F6} * ^{-}',:'P'。:true,:'EF_{CF4}',:'EF_{C2F6}',:'GWP_{CF4}',:'GWP_{C2F6}'
};}，// 单位行const createProcessUnitRow==>{
const makeField==>suffix?老实说，`${field}${suffix}` : field;return{
:'tCO_{}e',:'t',:true。:'kgCF_{}/tAl',:'kgC_{}F_{}/tAl',:'-',:'-'
};}，

判断单元格类型

显示图片，其余行显示文本。这种动态决定方式可避免冗余配置，并兼顾可 性。

const DATA_ROW_OFFSET=;//前面有信息项、单位两行
const cellType==>{
const isFormulaRow=args.row!==undefined&&args.row>=DATA_ROW_OFFSET&&args.row<=DATA_ROW_OFFSET+;//返回是否为图片类型；
return isFormulaRow?'image':'text';
};

在列配置中使用

createProcessColumn{
说到field。'process1',caption:'#铝电解工序',columns:
}

注：代码中的占位符如“”，需按实际需求补全数值或配置项，以保证功能完整运行。

使用此方案，你可以比较容易做到：

• 高质量视觉呈现——KaTeX + canvas 输出高清 PNG。
• 极速加载——两级缓存 + Web Worker 并发加速。
• 可维护性强——主要原因与 UI 分离，可快速迭代。

如果你正面临“表格中的数学符号模糊不清”或“首次加载过慢”的痛点，这套方案能帮助你解决掉。欢迎交流讨论，