> 本文记录了用 WorkBuddy AI 办公助手，从零设计一个完全离线可用的「到货检验通知单」网页的全过程。支持表单内容手动编辑、二维码自动生成、打印历史记录下拉选择，单文件双击即用，无需任何网络。

## 一、需求背景

公司供应链部门每天需要打印大量到货检验通知单，原有系统在线打印依赖网络，经常因为网络波动或系统维护导致无法及时打印，影响卸货验收流程。

需求要点：
- **完全离线**：双击 HTML 文件即可使用，不依赖任何网络
- **表单可编辑**：所有字段点击即可修改
- **二维码自动生成**：左右两个二维码，内容随单据编号/订单号实时变化
- **打印格式**：A4 纸张，适合直接打印
- **历史记录**：常用数据保留下拉选择，避免重复输入

## 二、为什么选择 WorkBuddy

之前试过用 ChatGPT、通义千问等工具生成网页，但都存在几个问题：
1. 生成的代码需要自己复制到编辑器保存，多了一步
2. 二维码库需要联网加载，不满足离线要求
3. 交互逻辑（如联动二维码、历史记录存储）描述不清时需要反复修改

WorkBuddy 的优势在于：
- **直接生成文件**：AI 直接把完整 HTML 写到本地文件，双击就能预览
- **内嵌第三方库**：自动从 CDN 下载二维码库并嵌入 HTML，实现真正离线
- **多轮迭代**：每一轮修改直接编辑文件，不用从头重来

## 三、实操步骤

### 3.1 第一步：描述需求 + 提供参考

打开 WorkBuddy 对话窗口，直接描述需求：

> 帮我设计一个 web 网页离线打印的到货检验通知单，要求是表单内容可以手动修改，单据打印大小按照2等分的页面设计。

同时提供了原有系统的 HTML 源码片段作为参考，包括表头结构、字段名称、二维码内容等。

WorkBuddy 会自动：
1. 分析参考代码的结构
2. 设计 HTML 骨架（A4 布局、工具栏、表单区域）
3. 从 CDN 下载 qrcode-generator 库并嵌入 HTML
4. 生成完整单文件 HTML



### 3.2 第二步：迭代修改样式

第一版生成后，我提出了修改意见：
- 只需要单个表格（去掉2等分中的第二份）
- 去掉空白单元格中的圆圈符号
- 序号列右侧表格线与备注右侧对齐
- 修复二维码不显示的问题

WorkBuddy 逐项修改，关键改动：
- 列宽从百分比调整为 `4%` 对齐
- 二维码库重新从 CDN 下载完整版本嵌入
- 二维码内容改为可编辑输入框

### 3.3 第三步：添加下拉历史记录

这是最实用的功能。供应商名称、物料编码等字段经常重复输入，希望有下拉选择。

向 WorkBuddy 描述需求：
> 将供应商名称、供应商编码、订单号等8个字段设置为可编辑下拉菜单，保存10条常用数据，超过数量自动替换旧数据。

WorkBuddy 实现方案：
- 使用 `<input list="datalist">` 实现可编辑下拉
- `localStorage` 存储历史值，每个字段最多 10 条
- `blur` 和 `change` 双事件监听确保不遗漏

### 3.4 第四步：修复历史记录丢失问题

实际使用中发现下拉菜单只有最新一条记录，之前的值丢失了。

WorkBuddy 排查后发现根因：**`file://` 协议下 localStorage 不稳定**，直接双击打开 HTML 文件时，部分浏览器刷新后数据丢失。

修复方案——三重存储保险：

| 存储层 | 作用 | 持久性 |
|---|---|---|
| 内存缓存 `_memCache` | 同一次会话内不丢 | 关闭页面清空 |
| `localStorage` | 跨会话持久化 | 浏览器支持时有效 |
| `window.name` | file:// 下的可靠后备 | 同标签页刷新仍在 |

```javascript
function loadHistory() {
  if (_memCache) return _memCache;          // 1. 内存缓存
  try { /* 2. localStorage */ } catch(e) {}
  try { /* 3. window.name 后备 */ } catch(e) {}
  _memCache = {};
  return _memCache;
}
```

同时增加 `change` 事件监听和页面加载时自动保存默认值，彻底解决问题。

### 3.5 第五步：二维码联动

最后一步是让二维码内容随表单字段实时变化：
- **左侧二维码** = 前缀 + 单据编号 + `*` + 订单号
- **右侧二维码** = 固定URL + 单据编号

修改任意一个字段，对应的二维码立即重新生成。

## 四、最终效果

最终产出一个单文件 HTML（约 40KB），双击打开即可使用：

**功能清单：**
- A4 横向打印布局，一张纸一份单据
- 所有字段点击即可编辑
- 8 个字段支持下拉历史选择（localStorage + window.name 双重存储）
- 左右两个二维码 SVG 矢量渲染，随字段实时刷新
- 工具栏：打印/导出PDF、增加明细行、清空内容
- 打印时自动隐藏工具栏和编辑辅助元素




## 五、踩坑记录与经验总结

### 坑1：内嵌第三方库不能凭记忆写
最开始让 AI 直接内嵌二维码库代码，但压缩后的代码凭记忆写会有语法错误。解决方案：让 AI 从 CDN 下载完整库文件再嵌入。

### 坑2：file:// 协议下 localStorage 不可靠
这是最隐蔽的问题。`localStorage` 在 `http://` 下完全正常，但 `file://` 下部分浏览器刷新后数据丢失。用 `window.name` 作为后备存储完美解决。

### 坑3：datalist 的 change 事件
`<datalist>` 配合 `<input>` 使用时，从下拉列表选择值后，某些浏览器不触发 `blur` 事件。必须同时监听 `change` 事件才能确保值被保存。

## 六、适合的场景

这种"离线单文件 HTML + 内嵌库 + localStorage" 的方案，适合所有需要离线打印表单的场景：
- 到货检验单、出库单、入库单
- 质检报告、巡检记录
- 考勤表、排班表
- 任何需要频繁填写重复数据的打印表单

## 总结

整个项目从需求到完成大约 30 分钟，经过 5 轮迭代。WorkBuddy 在这个过程中的核心价值：
1. **直接产出可用文件**，不是给你代码让你自己粘贴
2. **多轮迭代修改**，每轮只改动需要改的部分
3. **能排查 Bug**，发现 localStorage 在 file:// 下的问题并给出三重存储方案

如果你也有类似的离线表单打印需求，直接把需求描述 + 参考代码发给 WorkBuddy，30 分钟就能搞定。

---

**标签**：WorkBuddy、AI办公、效率工具

**专栏**：AI 与大数据 / 云+社区

**来源**：原创

本文记录了用 WorkBuddy AI 办公助手，从零设计一个完全离线可用的「到货检验通知单」网页的全过程。支持表单内容手动编辑、二维码自动生成、打印历史记录下拉选择，单文件双击即用，无需任何网络。

用 WorkBuddy 30分钟搞定离线打印到货检验通知单，含可编辑表单+二维码自动生成

开发工具

前端

新闻资讯

从零设计离线可用的到货检验通知单HTML网页，支持表单编辑、二维码自动生成、打印历史记录下拉选择，单文件双击即用，无需网络。通过WorkBuddyAI实现5轮迭代，解决localStorage在file://协议下的数据丢失问题，采用三重存储方案确保数据持久化。适合供应链、质检等场景的离线打印需求，30分钟即可完成开发。

数据丢失

代码解释

大数据

WorkBuddy 

ChatGPT

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从零设计离线可用的到货检验通知单HTML网页，支持表单编辑、二维码自动生成、打印历史记录下拉选择，单文件双击即用，无需网络。通过WorkBuddyAI实现5轮迭代，解决localStorage在file://协议下的数据丢失问题，采用三重存储方案确保数据持久化。适合供应链、质检等场景的离线打印需求，30分钟即可完成开发...

用 WorkBuddy 30分钟搞定离线打印到货检验通知单，含可编辑表单+二维码自动生成-腾讯云开发者社区-腾讯云

用 WorkBuddy 30分钟搞定离线打印到货检验通知单，含可编辑表单+二维码自动生成

用 WorkBuddy 30分钟搞定离线打印到货检验通知单，含可编辑表单+二维码自动生成

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐