一个老后端维护的纯前端项目:表格转换工具 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Fechin
V2EX    分享创造

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

  •  7
     
  •   Fechin
    PRO
    2023-01-12 11:30:26 +08:00 8473 次点击
    这是一个创建于 1004 天前的主题,其中的信息可能已经有所发展或是发生改变。

    距离上一次在 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 rowArray 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
        1
    liweiliang  
       2023-01-12 11:40:33 +08:00
    原来这个是大佬的,之前有用到
    Alexpy
        2
    Alexpy  
       2023-01-12 11:57:26 +08:00
    666
    Raos
        3
    Raos  
       2023-01-12 12:01:51 +08:00
    这个工具我一直在用,期待已久的 MySQL 查询结果转换成其它格式终于有了,赞
    fds
        4
    fds  
       2023-01-12 12:12:37 +08:00
    厉害了。我之前都是写不同 python 脚本处理,没想到要做成工具。
    Alexpy
        5
    Alexpy  
       2023-01-12 12:16:45 +08:00
    @fds 我也是写了一大堆脚本
    Fechin
        6
    Fechin  
    OP
    PRO
       2023-01-12 13:31:21 +08:00
    @fds 自从用上 Magic 转换器就很少写脚本了,一些简单的需求在 IDE 里用正则替换也很方便
    @Alexpy 工具比写脚本快
    sarices
        7
    sarices  
       2023-01-12 14:14:24 +08:00
    感谢,有在用,以前都以为是外国友人的作品,因为是工具类而且是英文版,没有深究是哪里的。
    meetqyx
        8
    meetqyx  
       2023-01-12 14:29:39 +08:00   1
    这 UI 是真的好看
    zqjilove
        9
    zqjilove  
       2023-01-12 14:43:47 +08:00   1
    经常用,必须给大佬点赞一波
    Fechin
        10
    Fechin  
    OP
    PRO
       2023-01-12 15:07:05 +08:00   1
    @wcao 感谢,作为一个后端开发,这是我的极限了
    with
        11
    with  
       2023-01-12 15:57:22 +08:00
    好工具,赞
    yehai
        12
    yehai  
       2023-01-12 16:10:07 +08:00   1
    经常用,原来作者在 V 站
    Raos
        13
    Raos  
       2023-01-12 16:31:06 +08:00
    我算了一下,9 种数据源,28 种生成格式,妥妥的 200 多个转换器
    xuxuzhaozhao
        14
    xuxuzhaozhao  
       2023-01-12 17:03:31 +08:00
    厉害!
    Rollup
        15
    Rollup  
       2023-01-12 17:06:46 +08:00   1
    用过转 Markdown 功能,希望能支持合并单元格
    qq316107934
        16
    qq316107934  
       2023-01-12 17:11:21 +08:00   1
    好用,收藏了
    另:
    语言选择找了好久发现在右下角,要是放在右上角就好了
    另外我的浏览器设置里 accept-language zh-CN 优先级是最高的,返回的页面还是英文
    kokdemo
        17
    kokdemo  
       2023-01-12 17:21:28 +08:00   1
    牛啊这个,基本上每个月都用
    Fechin
        18
    Fechin  
    OP
    PRO
       2023-01-12 17:25:11 +08:00
    @Rollup 谢谢反馈,很早就有小伙伴提合并单元格的需求了,整站都得动,我还是太懒
    @qq316107934 谢谢反馈,这里考虑优化一下
    Fechin
        19
    Fechin  
    OP
    PRO
       2023-01-12 17:28:56 +08:00
    @zqjilove @kokdemo 感谢,我倒是很少用到格式转换,反而 Magic 转换器用的最多,特别是处理一些小的批量操作
    dd0754
        20
    dd0754  
       2023-01-12 19:45:40 +08:00
    大佬牛批
    Hancock
        21
    Hancock  
       2023-01-12 20:21:20 +08:00
    常用 excel to html,期待支持导入合并单元格的
    watzds
        22
    watzds  
       2023-01-13 10:38:39 +08:00
    这不比一般前端强多了
    dengji85
        23
    dengji85  
       2023-01-13 11:14:54 +08:00
    上次开始就一直在用,希望支持一下 oracle
    Fechin
        24
    Fechin  
    OP
    PRO
       2023-01-13 17:43:35 +08:00
    @dengji85 老哥 oracle 具体是指哪一块?
    Cesaryuan
        25
    Cesaryuan  
       2023-01-13 19:26:24 +08:00
    outsider168
        26
    outsider168  
       2023-01-13 21:02:44 +08:00   1
    666 啊 这个工具是我最喜欢的格式转换工具 原来作者在这里
    cicl
        27
    cicl  
       2023-01-14 11:33:40 +08:00
    一直以为是国外的网站,没想到是 v 站大佬的,哈哈
    Fechin
        28
    Fechin  
    OP
    PRO
       2023-01-16 09:52:11 +08:00
    @Cesaryuan 已修复
    zijieq
        29
    zijieq  
       2023-01-16 10:22:54 +08:00
    居然遇到作者了,半年前偶然在搜索引擎里搜到这个工具,非常好用,刚刚打开发现之前的缓存都还在
    itechify
        30
    itechify  
    PRO
       2023-01-16 10:29:57 +08:00 via Android
    @zijieq 是的,没想到半年前用过
    mydingyan
        31
    mydingyan  
       2023-01-16 10:38:39 +08:00
    @zijieq 同意,我是搜 HTML 转 markdown 搜到的
    C603H6r18Q1mSP9N
        32
    C603H6r18Q1mSP9N  
       2023-01-16 10:43:34 +08:00
    UI 喜欢,用了什么 UI 框架了没?
    Fechin
        33
    Fechin  
    OP
    PRO
       2023-01-16 11:07:13 +08:00
    @zijieq 缓存过分了,我应该让缓存时长更短一些
    Fechin
        34
    Fechin  
    OP
    PRO
       2023-01-16 11:08:28 +08:00
    @Fechin 没用 UI 框架,用了 CSS 框架 Tailwind CSS
    lifeintools
        35
    lifeintools  
       2023-01-16 11:22:35 +08:00
    之前用过 对我很有用。谢谢作者
    ltmst
        36
    ltmst  
       2023-01-16 16:17:02 +08:00
    这这这 这个好啊!!!
    illl
        37
    illl  
       2023-01-16 16:54:32 +08:00 via iPhone
    有没有考虑做成 app ,有时候处理敏感数据的话不敢用网页版的
    Fechin
        38
    Fechin  
    OP
    PRO
       2023-01-16 17:23:15 +08:00
    @illl 暂时没有打算,工具不会请求 API ,不会存储任何用户数据,所有数据处理都是在浏览器里完成的
    lqzhgood
        39
    lqzhgood  
       2023-01-16 17:46:13 +08:00
    试了下,发现个 bug~
    https://imgloc.com/i/2dUcN
    zx9481
        40
    zx9481  
       2023-01-16 17:47:16 +08:00
    有简体中文版吗
    zx9481
        41
    zx9481  
       2023-01-16 17:48:39 +08:00
    @zx9481 找到了 右下角可以切换
    Fechin
        42
    Fechin  
    OP
    PRO
       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
        43
    lqzhgood  
       2023-01-17 10:45:40 +08:00
    lqzhgood
        44
    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
        45
    lqzhgood  
       2023-01-17 10:58:36 +08:00
    不知道这个算不算 bug ,毕竟大部分导出的数据都比较”规整“
    对于这个”bug“,可能还需要用户提供一个 空值 的 默认值 选项~
    Fechin
        46
    Fechin  
    OP
    PRO
       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
        47
    OSong  
       2023-01-17 14:44:33 +08:00
    @sarices 其实右下方可以改为简体中文 哈哈哈
    hanswu
        48
    hanswu  
       2023-01-17 15:31:46 +08:00
    给大佬点个赞,最近在百度搜才用到这个,真心好用!
    sarices
        49
    sarices  
       2023-01-17 15:44:15 +08:00
    @OSong 应该放到顶部,估计没多少人会拉到底部,基本工功能就在上面可以完成了
    wangwei216
        50
    wangwei216  
       2023-01-17 17:15:46 +08:00
    牛皮,我前几天还用到了这个,这个还是很有用的,鼓励
    JsonNode
        51
    JsonNode  
       2023-01-17 17:42:22 +08:00
    表头魔法为空,第一行还是被忽略了
    lscho
        52
    lscho  
       2023-01-17 18:50:08 +08:00 via iPhone
    牛逼,以前都是自己写脚本实现,没想到做个通用的工具
    Fechin
        53
    Fechin  
    OP
    PRO
       2023-01-17 18:51:46 +08:00
    @lovedoing 有空格或换行符,也会当做魔法,想要保留表头,需要清空 textarea 文本框
    Fechin
        54
    Fechin  
    OP
    PRO
       2023-01-17 18:52:38 +08:00
    @lscho 我也是亏了好多脚本 :)
    manito2
        55
    manito2  
       2023-01-18 00:09:07 +08:00
    厉害,非常实用。
    bshu
        56
    bshu  
       2023-01-18 10:02:45 +08:00
    好东西,很实用
    yuhuanxi
        57
    yuhuanxi  
       2023-01-18 10:07:50 +08:00
    已加入到个人主页工具链接,试用了下很给力
    Fechin
        58
    Fechin  
    OP
    PRO
       2023-01-18 10:17:26 +08:00
    @yuhuanxi 谢谢支持
    cookii
        59
    cookii  
       2023-01-19 14:59:11 +08:00
    @Fechin 大佬,项目开源吗
    Fechin
        60
    Fechin  
    OP
    PRO
       2023-01-20 09:43:35 +08:00
    @imzhoukunqiang 代码太拉了,近期没有开源的计划
    LaurelHarmon
        61
    LaurelHarmon  
       2023-04-10 16:13:25 +08:00
    大佬,可以记录文字的颜色吗,带颜色的表格上传之后颜色都没了,转为其他格式(例如 LaTeX )还得重新调
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     6002 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 02:11 PVG 10:11 LAX 19:11 JFK 22:11
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86