一个老后端维护的纯前端项目：表格转换工具

[Fechin]

距离上一次在 V 站发的贴子，已过去将近三年，后端成了老后端，开发的纯前端项目 tableconvert.com 还在继续维护，并且新增了一些花里胡哨的功能。

作为一个后端程序员，有不少处理数据的小需求，比如：

• 批量给字段添加引号，拼接成 SELECT ... WHERE in (xxx) SQL ；
• 把运营整理好 Excel 按规则批量生成 UPDATE SQL;
• 按规则批量创建带内容文件
• 批量替换文件名 / 文件内容
• 快速把在 MySQL 命令行里的查询结果转换成 CSV 、Excel 、JSON 或 Markdown 表格等等

实现这些需求的方式多种多样，可以用命令、脚本或正则替换，程序员肯定不会一条条手敲。我把这些需求塞到了表格转换工具的 Magic 转换器，我几乎每天都会用到它，这也是持续维护它的原因。

Magic 转换器传送门： https://tableconvert.com/excel-to-magic

Magic 转换器是什么？

TableConvert 表格转换工具一共有 28 种转换器，Magic 转换器是其中之一，也是我最常用的转换器，它内置了像 awk 命令一样的指令，用户可以根据这些指令设计自己期望的规则数据。Magic 转换器支持的语法指令有：

语法指令	描述	支持哪些 JS 方法
{h1} {h2} ...	1th, 2th ... field of heading, Aka {hA} {hB} ...	String methods
{$1} {$2} ...	1th, 2th ... field of current row, Aka {$A} {$B} ...	String methods
{F,} {F;}	Split the current row by the string after F
{NR} {NR+100}	Line Number of current Row from 1 or 100
{ENR}	End line Number of Rows
{$0}	All Fields of current row	Array methods
{NF}	Number of Fields
{x ...}	Execute JavaScript code, eg: {x new Date()}
{...\}	Use backslash \ to output braces {...}

Magic 转换器能做什么？

1. 批量给指定列添加双引号（ Built-in Magic ）

Row Magic:

"{$1}"{x if(NR<ENR)", "}

生成效果：

"Markdown", "Magic", "LaTeX", "SQL", "HTML", "CSV", "Excel", "JSON", "JSONLines", "ASCII", "MediaWiki", "AsciiDoc", "Qlik", "DAX", "Firebase", "YAML", "XML", "Jira", "Textile", "reStructuredText", "PHP", "Ruby", "ASP", "ActionScript", "TracWiki", "BBCode", "PDF", "JPEG"

2. 生成按第一列作为 WHERE 条件修改第二列的 UPDATE SQL （ Built-in Magic ）

Row Magic:

UPDATE user set name ='{$2}' WHERE id='{$1}';`

生成效果：

UPDATE user set name ='Roberta' WHERE id='1';
UPDATE user set name ='Oliver' WHERE id='2';
UPDATE user set name ='Shayna' WHERE id='3';
...

3. 批量生成创建相同规则内容的文件命令（ Built-in Magic ）

Row Magic:

echo "title: File {$2} 
date: {x new Date().getTime()}
" > docs/{$2}.md

生成效果：

echo "title: File name 
date: 1673493211739
" > docs/name.md

echo "title: File Roberta 
date: 1673493211739
" > docs/Roberta.md
...

4. 批量替换文件名（ Built-in Magic ）

Row Magic:

mv {$2} {$2.replace('e', 'E')}-generator.json`

生成效果：

mv name namE-generator.json
mv Roberta RobErta-generator.json
mv Oliver OlivEr-generator.json
...

还能玩儿出什么花来？篇幅有限，就不一一列举了。V 友有常用的 Magic 模板，可以在评论区留言，我会它按使用频率整理并添加到 Built-in Magic 中。

公司要倒闭了，没啥事儿，这次有时间对 Magic 转换区进行升级，分享给大家，各位轻喷，谢谢！

- 修复了数据源和 Table 生成器重叠的问题
- 添加了去重复行的按钮
- 删除重复行和列合并为一个按钮


贴一个 Table Editor 的使用动画：
https://tva1.sinaimg.cn/large/008vxvgGgy1ha5iag13vmg30m90acnkw.gif

一个 Magic 转换器的演示视频：
https://t.me/tableconvert/23

gif 太大了导致图床 403 ，Table Editor 演示在这里 https://t.me/tableconvert/25

感谢各路英雄的喜欢，贴一个批量生成代码的 demo： https://t.me/tableconvert/36 ，有兴趣的可以加入频道一起交流

[liweiliang]

原来这个是大佬的，之前有用到

[Alexpy]

666

[Raos]

这个工具我一直在用，期待已久的 MySQL 查询结果转换成其它格式终于有了，赞

[fds]

厉害了。我之前都是写不同 python 脚本处理，没想到要做成工具。

[Alexpy]

@fds 我也是写了一大堆脚本

[Fechin]

@fds 自从用上 Magic 转换器就很少写脚本了，一些简单的需求在 IDE 里用正则替换也很方便
@Alexpy 工具比写脚本快

[sarices]

感谢，有在用，以前都以为是外国友人的作品，因为是工具类而且是英文版，没有深究是哪里的。

[wcao]

这 UI 是真的好看

[zqjilove]

经常用，必须给大佬点赞一波

[Fechin]

@wcao 感谢，作为一个后端开发，这是我的极限了

[with]

好工具，赞

[yehai]

经常用，原来作者在 V 站

[Raos]

我算了一下，9 种数据源，28 种生成格式，妥妥的 200 多个转换器

[xuxuzhaozhao]

厉害！

[Rollup]

用过转 Markdown 功能，希望能支持合并单元格

[qq316107934]

好用，收藏了
另：
语言选择找了好久发现在右下角，要是放在右上角就好了
另外我的浏览器设置里 accept-language zh-CN 优先级是最高的，返回的页面还是英文

[kokdemo]

牛啊这个，基本上每个月都用

[Fechin]

@Rollup 谢谢反馈，很早就有小伙伴提合并单元格的需求了，整站都得动，我还是太懒
@qq316107934 谢谢反馈，这里考虑优化一下

[Fechin]

@zqjilove @kokdemo 感谢，我倒是很少用到格式转换，反而 Magic 转换器用的最多，特别是处理一些小的批量操作

[dd0754]

大佬牛批

[Hancock]

常用 excel to html,期待支持导入合并单元格的

[watzds]

这不比一般前端强多了

[dengji85]

上次开始就一直在用，希望支持一下 oracle

[Fechin]

@dengji85 老哥 oracle 具体是指哪一块？

[Cesaryuan]

有个显示 bug： https://pic7.58cdn.com.cn/nowater/webim/big/n_v26e73c94119c4402da82c84b0fd71c470.png

[outsider168]

666 啊 这个工具是我最喜欢的格式转换工具 原来作者在这里

[cicl]

一直以为是国外的网站，没想到是 v 站大佬的，哈哈

[Fechin]

@Cesaryuan 已修复

[zijieq]

居然遇到作者了，半年前偶然在搜索引擎里搜到这个工具，非常好用，刚刚打开发现之前的缓存都还在

[oneisall8955]

@zijieq 是的，没想到半年前用过

[mydingyan]

@zijieq 同意，我是搜 HTML 转 markdown 搜到的

[C603H6r18Q1mSP9N]

UI 喜欢，用了什么 UI 框架了没？

[Fechin]

@zijieq 缓存过分了，我应该让缓存时长更短一些

[Fechin]

@Fechin 没用 UI 框架，用了 CSS 框架 Tailwind CSS

[lifeintools]

之前用过 对我很有用。谢谢作者

[gbw1992]

这这这 这个好啊!!!

[illl]

有没有考虑做成 app ，有时候处理敏感数据的话不敢用网页版的

[Fechin]

@illl 暂时没有打算，工具不会请求 API ，不会存储任何用户数据，所有数据处理都是在浏览器里完成的

[lqzhgood]

试了下，发现个 bug~
https://imgloc.com/i/2dUcN

[zx9481]

有简体中文版吗

[zx9481]

@zx9481 找到了 右下角可以切换

[Fechin]

@lqzhgood 已修复，感谢反馈 https://tableconvert.com/json-to-markdown?data=[{a:1,b:2},%20{b:9999,a:444}]

[lqzhgood]

@Fechin 又找到一个
https://imgloc.com/i/2Mu8a

[lqzhgood]

@lqzhgood https://tableconvert.com/json-to-markdown?data=[{a:1,b:2},%20{b:9999,c:123},{d:999},{e:123}]

[lqzhgood]

不知道这个算不算 bug ，毕竟大部分导出的数据都比较”规整“
对于这个”bug“，可能还需要用户提供一个 空值 的 默认值 选项~

[Fechin]

@lqzhgood 我觉得算，虽然极少出现，但是数据丢失的体验不友好。

我修改了一下，保证 header 顺序的同时去重，平铺所有数据，没有值则为空： https://tableconvert.com/json-to-markdown?data=%5B%7Ba%3A1%2Cb%3A2%7D%2C%7Bb%3A9999%2Cc%3A123%7D%2C%7Bd%3A999%7D%2C%7Be%3A123%7D%5D

[OSong]

@sarices 其实右下方可以改为简体中文 哈哈哈

[hanswu]

给大佬点个赞，最近在百度搜才用到这个，真心好用！

[sarices]

@OSong 应该放到顶部，估计没多少人会拉到底部，基本工功能就在上面可以完成了

[wangwei216]

牛皮，我前几天还用到了这个，这个还是很有用的，鼓励

[lovedoing]

表头魔法为空，第一行还是被忽略了

[lscho]

牛逼，以前都是自己写脚本实现，没想到做个通用的工具

[Fechin]

@lovedoing 有空格或换行符，也会当做魔法，想要保留表头，需要清空 textarea 文本框

[Fechin]

@lscho 我也是亏了好多脚本 :)

[manito2]

厉害，非常实用。

[bshu]

好东西，很实用

[yuhuanxi]

已加入到个人主页工具链接，试用了下很给力

[Fechin]

@yuhuanxi 谢谢支持

[cookii]

@Fechin 大佬，项目开源吗

[Fechin]

@imzhoukunqiang 代码太拉了，近期没有开源的计划

[LaurelHarmon]

大佬，可以记录文字的颜色吗，带颜色的表格上传之后颜色都没了，转为其他格式（例如 LaTeX ）还得重新调