当前位置: 首页 > 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.zskr.cn/news/1390313.html

相关文章:

  • 【2026最新】实测5款降AI率工具:从标红到5%!附AIGC免费提示词指令
  • 2026论文降AI率教程:实测3款降AIGC工具,搭配6个免费技巧快速通关答辩
  • HS2-HF Patch终极指南:如何一键汉化、去和谐和增强你的HoneySelect2游戏体验
  • 2026降AIGC率实测:5款降AI率工具红黑榜,哪些是坑?(附免费指令)
  • Unity iOS上线必修课:Info.plist权限配置与App Store审核避坑指南
  • 2026 南宁名表回收门店横评,多家商户对比摸清真实行情 - 薛定谔的梨花猫
  • 解决环世界模组依赖冲突:RimSort拓扑排序引擎深度解析
  • 单卡GPU运行百万上下文大模型:从KV缓存压缩到工程实践
  • 终极Windows右键菜单管理工具:ContextMenuManager完全指南
  • DDrawCompat:让Windows经典游戏在现代系统上完美运行的终极兼容性方案
  • 30秒部署家庭私有Claude:基于Docker Compose的零配置局域网AI共享方案
  • STM32F103驱动ADF4351模块:从硬件连接到扫频程序,一份给电赛新手的避坑指南
  • 【计算机组成原理】 固态硬盘
  • 第四篇:《Docker 镜像:分层结构、拉取与推送》
  • 5分钟打造你的网易云音乐超级插件中心:BetterNCM-Installer终极指南
  • 如何快速搭建企业级ITSM平台:iTop开源CMDB与IT服务管理完整指南
  • drawio-desktop:企业级跨平台图表协作解决方案
  • AI时代开发者转型:从代码工匠到战略指挥官的三方结对编程实践
  • 中山黄金上门回收推荐,福运来高分领跑 - 黄金回收
  • SPT-AKI存档编辑器:逃离塔科夫离线版的完整游戏进度管理指南
  • 你的电脑健康管家:LibreHardwareMonitor如何帮你预防硬件故障?
  • Pixhawk飞控刷固件后,为什么电机就是不转?我踩过的三个校准大坑
  • 融合经典测量与机器学习:数学分班考试的效度验证与优化实践
  • 文本嵌入实战指南:从语义理解到业务落地
  • 用Arduino UNO与AMG88xx传感器打造低成本热成像相机
  • 高价购买的传统SolidWorks工作站利用率不到30%!云飞云共享算力让每一分钱都花在刀刃上
  • 好用的淡纹眼油 CA眼油30天25 +轻松抗初老 - 全网最美
  • Unity WebGL项目如何实现画布透明,完美融入你的网页设计(附.jslib文件与完整配置)
  • Layerdivider终极指南:如何免费快速实现专业级图像智能分层
  • 你的SPSS方差分析结果真的靠谱吗?深入聊聊ANOVA背后的6大假设检验(附实操验证方法)