全部作品
FrontendToolMobilePDF/DOCX

静态网页提词器

多格式纯前端提词工具

Overview

一个纯前端、多文档格式、面向手机和平板优化的网页提词器。支持 PDF、DOCX、PPTX、XLSX 和 TXT 文件,文件解析主要在浏览器本地完成,可直接上传到宝塔静态站点部署。

Problem

提词器需要支持多种文档格式,且必须能在手机和平板上流畅使用。大型文件可能导致浏览器内存和解析延迟,不同浏览器对字体、全屏、横竖屏和文件选择器的支持也不一致。

Solution

设计为纯前端工具,文件完全在浏览器本地解析。PDF 使用 PDF.js,DOCX/PPTX 使用浏览器端压缩包解析,XLSX 使用 SheetJS,TXT 识别常见 BOM 并做编码回退。上传入口优先调用浏览器原生 showPicker(),不支持时回退 click()。

  • 支持 PDF、DOCX、PPTX、XLSX、TXT 五种格式
  • 文件上传与替换、字号调整、滚动速度、开始与暂停
  • 字体、文字颜色、背景颜色和加粗切换
  • 单行、双行、多行和横竖屏布局
  • 文件完全在浏览器本地解析,不上传到第三方服务
  • 兼容多种手机浏览器,含文件选择器回退

Tech

原生 HTML/CSS/JavaScript,PDF.js 解析 PDF,JSZip 解析 DOCX/PPTX,SheetJS 解析 XLSX。纯静态部署,通过 Python http.server 本地预览或宝塔站点 HTTPS 部署。

Result

已部署可用。解决过宝塔部署后手机点击上传无反应的问题:原因是部分手机浏览器对隐藏文件输入框有限制,修复为优先调用浏览器原生 showPicker()。

Reflection

这个项目虽然功能简单,但它体现了从"完成代码"到"真实设备验证"的重要性。桌面模拟不能替代真机测试,浏览器安全策略和文件选择器兼容性是移动端提词器的主要性能边界。

联系合作

有项目想做成可展示、可运行、可交付的作品?无论是本地商家官网、短视频内容、AI 工具,还是轻量系统,可先从一次小范围诊断开始。

微信
19163325806
GitHub / B站 / 邮箱
即将更新