excel发给家长填信息，乱到不能行，作为教师很崩溃？1个网页帮到您

本文使用一个简单高效的HTML页面，解决数据格式的痛点。

前言

数据之所以混乱，很多时候是由于广大用户没有使用电脑编辑excel引起。

而手机端编辑的数据，总是七零八落。

有时候，只是为了一行数据，用户超级多，命名非常乱，一个一个整理，还要汇总为总表，可想而知，管理员得有多么地抓狂。

深度说明

上述需求的深度分析告诉我们，这是一个需要多人协作的场景。所以共享文档，可以用于多用户协作的产品最为合适。

但是，数据放在别人的服务器上，总要付出一些小小的代价，不如自己掌握的好。

场景

假设本文的场景，是一位教师，要登记学生的姓名，年龄，居住地等信息，发送给家长，让家长完成后上交老师。

我们的解决方案：

1. 完成一个HTML页面，名字叫“信息填报”；
2. 在页面内，给出需要上报的表单项；
3. 填写完成后，点击按钮“复制”，将表单数据格式化为逗号分隔符，并赋值到剪切板。
4. 将剪切板内容粘贴给老师；
5. 老师将逗号分隔符内容贴到txt文本文件内，一人一行，命名为 csv 文件。

页面布局使用bootstrap，直接引用CDN资源，所以整个页面相当精简。格式化内容并发送到剪切板使用js实现。

页面

二话不说，直接上代码。截取表单的部分。

这是iphonX上的效果图：

其次实现填写数据校验，和赋值到剪切板操作，使用jquery实现。同样我们也直接引用CDN资源。下图是按钮点击后，简单的非空校验，格式可以做更详细的控制。

为了将内容拷贝到剪切板，我们引入 clipboardjs 这个库，并在校验通过后将结果复制到剪切板。使用下面这个节点存储数据。

<textarea id="content" hidden></textarea>

复制到剪切板也极为简单。首先是使用元素绑定。

接着在脚本内调用。

到这里，我们这个网页就完成了。下面把这个html文件通过微信发送给家长。

家长使用默认浏览器打开该页面。

初始默认页面

填写数值

填写完成后，点击按钮“复制到剪贴板”。

把剪切板内容贴给老师。

老师把上述内容写入csv文件，一个学生一行数据。

保存后，使用excel打开，就可以了。

结语

本文使用了网页表单的约束方式，防止家长填写数据的混乱，无论在电脑浏览器，还是在手机端，都可以良好地运行，能有效降低重复劳动。

特别是在数据多的情况下，效果明显。