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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 688 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

TableConvert Preview

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 转换区进行升级，分享给大家，各位轻喷，谢谢！

第 1 条附言 · 2023-01-16 15:37:25 +08:00

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

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

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

第 2 条附言 · 2023-01-16 15:41:13 +08:00

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

第 3 条附言 · 2023-01-18 10:28:57 +08:00

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

61 条回复 • 2023-04-10 16:13:25 +08:00

liweiliang

2023-01-12 11:40:33 +08:00

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

Alexpy

2023-01-12 11:57:26 +08:00

666

Raos

2023-01-12 12:01:51 +08:00

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

fds

2023-01-12 12:12:37 +08:00

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

Alexpy

2023-01-12 12:16:45 +08:00

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

Fechin

2023-01-12 13:31:21 +08:00

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

sarices

2023-01-12 14:14:24 +08:00

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

wcao

2023-01-12 14:29:39 +08:00

这 UI 是真的好看

zqjilove

2023-01-12 14:43:47 +08:00

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

Fechin

2023-01-12 15:07:05 +08:00

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

with

2023-01-12 15:57:22 +08:00

好工具，赞

yehai

2023-01-12 16:10:07 +08:00

经常用，原来作者在 V 站

Raos

2023-01-12 16:31:06 +08:00

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

xuxuzhaozhao

2023-01-12 17:03:31 +08:00

厉害！

Rollup

2023-01-12 17:06:46 +08:00

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

qq316107934

2023-01-12 17:11:21 +08:00

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

kokdemo

2023-01-12 17:21:28 +08:00

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

Fechin

2023-01-12 17:25:11 +08:00

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

Fechin

2023-01-12 17:28:56 +08:00

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

dd0754

2023-01-12 19:45:40 +08:00

大佬牛批

Hancock

2023-01-12 20:21:20 +08:00

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

watzds

2023-01-13 10:38:39 +08:00

这不比一般前端强多了

dengji85

2023-01-13 11:14:54 +08:00

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

Fechin

2023-01-13 17:43:35 +08:00

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

Cesaryuan

2023-01-13 19:26:24 +08:00

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

outsider168

2023-01-13 21:02:44 +08:00

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

cicl

2023-01-14 11:33:40 +08:00

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

Fechin

2023-01-16 09:52:11 +08:00

@Cesaryuan 已修复

zijieq

2023-01-16 10:22:54 +08:00

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

oneisall8955

2023-01-16 10:29:57 +08:00 via Android

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

mydingyan

2023-01-16 10:38:39 +08:00

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

C603H6r18Q1mSP9N

2023-01-16 10:43:34 +08:00

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

Fechin

2023-01-16 11:07:13 +08:00

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

Fechin

2023-01-16 11:08:28 +08:00

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

lifeintools

2023-01-16 11:22:35 +08:00

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

gbw1992

2023-01-16 16:17:02 +08:00

这这这这个好啊!!!

illl

2023-01-16 16:54:32 +08:00 via iPhone

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

Fechin

2023-01-16 17:23:15 +08:00

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

lqzhgood

2023-01-16 17:46:13 +08:00

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

zx9481

2023-01-16 17:47:16 +08:00

有简体中文版吗

zx9481

2023-01-16 17:48:39 +08:00

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

Fechin

2023-01-17 10:39:14 +08:00

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

lqzhgood

2023-01-17 10:45:40 +08:00

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

lqzhgood

2023-01-17 10:46:34 +08:00

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

lqzhgood

2023-01-17 10:58:36 +08:00

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

Fechin

2023-01-17 11:43:57 +08:00

@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

2023-01-17 14:44:33 +08:00

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

hanswu

2023-01-17 15:31:46 +08:00

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

sarices

2023-01-17 15:44:15 +08:00

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

wangwei216

2023-01-17 17:15:46 +08:00

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

lovedoing

2023-01-17 17:42:22 +08:00

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

lscho

2023-01-17 18:50:08 +08:00 via iPhone

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

Fechin

2023-01-17 18:51:46 +08:00

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

Fechin

2023-01-17 18:52:38 +08:00

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

manito2

2023-01-18 00:09:07 +08:00

厉害，非常实用。

bshu

2023-01-18 10:02:45 +08:00

好东西，很实用

yuhuanxi

2023-01-18 10:07:50 +08:00

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

Fechin

2023-01-18 10:17:26 +08:00

@yuhuanxi 谢谢支持

cookii

2023-01-19 14:59:11 +08:00

@Fechin 大佬，项目开源吗

Fechin

2023-01-20 09:43:35 +08:00

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

LaurelHarmon

2023-04-10 16:13:25 +08:00

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