当前位置: 首页 > news >正文

精装修——我的 HTML 小工具集第二版

距离上次发那篇《马桶镶金边》已经过去几天了。

说实话,发完之后我挺忐忑的。毕竟那俩工具说白了就是个 HMTL 编辑器 + PDF 转换器,功能简陋,UI 凑合。评论区有人说"这不就是给 div 加了个 contenteditable 吗",我都没敢回——他说得对。

但工具发出去之后,最意外的不是 Star 数,而是我自己真的在用

改个邮件模板,不再打开 VS Code;导个活动页 PDF,不用找在线转换网站传文件。自己写的东西自己天天用,那种感觉挺奇妙的——就像蹲在自己镶金边的马桶上,发现还真挺舒服

既然用着用着就想改,改着改着就改出了第二版。


第二版改了什么

这次没有重写,没有推翻,就是在原有基础上把短板补上:

✏️ HTML 编辑器

  • 新增 上传本地 HTML 文件,直接加载到编辑器
  • 新增 导出编辑后的 HTML 文件下载
  • 优化 依赖全拉到本地,不依赖任何 CDN
  • 优化 PDF 导出替换了 Adobe 标识,干净无痕
  • 优化 支持一键跳转到独立 PDF 转换工具

HTML 转 PDF

  • 优化 同样换了本地依赖,不依赖 CDN
  • 优化 兼容 GitHub Pages 部署,中英文双语

最核心的一个改动:从 CDN 依赖改成了本地依赖

之前所有的库(html2canvas、jsPDF、Tailwind、Google Fonts)都是走 CDN 加载的。好处是省空间,坏处是没网就白屏。这次把总共 30 多个字体文件 + 3 个 JS 库 全部下载到本地仓库,以后打开即用,离线也能跑。

离线可用 — 这是纯前端工具的尊严。如果连打开个 HTML 文件都要联网,那和在线工具有什么区别。


项目现在长这样

html-tools/├── index.html / index-en.html # 首页(中文/英文)├── editor.html / editor-en.html # 编辑器(中/英)├── to-pdf.html / to-pdf-en.html # PDF 转换(中/英)├── server.js / start.sh # 本地服务器├── lib/ # JS 库本地版├── fonts/ # 字体文件└── css/

从"俩 HTML 文件"变成了"中英文双语的完整工具集"。结构还是很简单,但不再简陋了。


AI 在这次改版中的角色

这次和 AI 的合作方式变了。

上次我是这么干的:

: 帮我加个上传 HTML 的功能
AI: 好的,加了
: PDF 导出效果不对
AI: 改好了

这次变成:

: 这个 PDF 导出为什么有 Adobe 标识?
AI: 因为 jsPDF 内部用了 CID 字体映射
: 能不能去掉?
AI: 可以通过 output('arraybuffer') 拿到二进制替换
: 不行,还是不行,你别绕圈子,直接把这个逻辑写成手写 PDF
AI: ✗ 手写 PDF 对象偏移算错了
: 算了恢复原来的,别折腾了
AI: 好的恢复

看出来没?我有了判断力。我知道什么方案能走通、什么方案是死胡同、什么时候该放弃。

上次是"AI 写啥我用啥",这次是"AI 写了,我 review,不行打回重写"。角色从用户变成了技术负责人


版本对比

v1.0 马桶镶金边
v2.0 精装修版
~650KB 仓库大小
功能 v1.0 v2.0
上传 HTML ✅ 本地文件直接加载
导出 HTML ✅ 下载编辑后的代码
中英文切换 ❌ 只有中文 ✅ 中英文双语
离线可用 ❌ 依赖 CDN ✅ 全本地依赖
PDF Adobe 标识 ❌ Chrome 提示 ✅ 干净无痕
GitHub Pages ❌ 手动部署 ✅ gh-pages 自动部署

给谁用

和上次一样,目标用户没变:

  • 运营和产品 — 改个活动页排版不求开发,上传 → 拖拽 → 导出 PDF,一气呵成
  • 前端新手 — 写完代码可视化看效果,不用打开 DevTools
  • 需要离线工具的人 — 下载到本地,断网也能用

链接

GitHub 仓库 在线体验

中英文双语 · 离线可用 · MIT 开源


从"马桶镶金边"到"精装修",最开心的不是多了几个功能,而是证明了一件事:

用 AI 做的东西,自己真的会用、会改、会迭代。

这才是"AI 辅助开发"最真实的模样——不是一次生成就完事,而是像搭积木一样,一点一点修成自己想要的样子。

下一个版本会是什么样?我也挺期待的。

http://www.jsqmd.com/news/889709/

相关文章:

  • Wireshark解密微信小程序HTTPS流量实战指南
  • 构建感知型AI编程助手:连接实时数据流提升开发效率
  • 终极Windows右键菜单管理指南:使用ContextMenuManager提升桌面效率
  • Git squash 实战:用交互式 rebase 构建可追溯的交付快照
  • dbt核心原理与工程实践:从数据仓库定位到DAG血缘治理
  • 互联网大厂 Java 求职面试:深入探讨微服务架构与 Spring Boot 的应用
  • Excel+PPT双模生成引擎:基于LLM编排的结构化文档自动化方案
  • JVM学习第一篇
  • 智能体治理:超越MCP的框架设计与实战指南
  • 为什么Thorium浏览器是Chromium生态中的编译优化典范?
  • 避开这些坑!Keil uVision5新建工程到编译HEX的保姆级避坑指南
  • ZenTimings:AMD Ryzen内存时序监控终极指南与完整教程
  • 终极英雄联盟自动化工具指南:5分钟解放双手,告别繁琐游戏操作
  • drawio-desktop:企业级跨平台图表协作解决方案
  • 51单片机驱动继电器模块,除了点灯还能玩什么?5个创意应用思路分享
  • AI智能体质量治理实战:从集体失控到可靠协同的工程化修复
  • 2026 南宁名表回收门店横评,多家商户对比摸清真实行情 - 薛定谔的梨花猫
  • 西安黄金回收指南:2026年避坑手册与机构推荐 - 上门黄金回收
  • 普祥健康冲刺港股:年营收4.7亿 净利降24% 王伟斌控制74%股权
  • # 2026年国内广东广州地区亚马逊代运营五大品牌排名及解析 - 十大品牌榜
  • Unity iOS上线必修课:Info.plist权限配置与App Store审核避坑指南
  • 打卡信奥刷题(3319)用C++实现信奥题 P9188 [USACO23OPEN] Pareidolia S
  • 如何快速搭建企业级ITSM平台:iTop开源CMDB与IT服务管理完整指南
  • 离散概率分布实战指南:二项、泊松、几何、超几何四大分布选型与落地
  • 平台、用户、品牌都在变,《2026 AI重构下的社交媒体营销趋势报告》五大趋势,你读懂了吗?
  • JMeter压测过程中的四维监控与七步根因排查法
  • Layerdivider终极指南:如何免费快速实现专业级图像智能分层
  • 2026年5月潜水搅拌机/立式潜水搅拌机/推流式潜水搅拌机/防爆潜水搅拌机厂家推荐:高效混合与节能稳定实力之选 - 品牌推荐用户报道者
  • Claude认证架构师指南:AI原生应用架构设计与实战解析
  • 5分钟快速汉化Android Studio:官方修改版中文语言包完全指南