如何使用JS将HTML页面用户输入数据保存为.xlsx文件并按规则命名

实现原理 #

纯前端实现，借助开源的SheetJS库完成客户端直接生成.xlsx文件，无需后端服务支持。

修改步骤 #

1. 引入xlsx处理依赖 #

在原HTML的</head>标签前加入依赖引入代码。

2. 调整表单提交逻辑 #

阻止表单默认的POST提交行为，改为触发自定义的导出逻辑。

3. 编写导出处理代码 #

实现表单值读取、文件名生成、xlsx文件生成和下载触发的完整逻辑。 #

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles-Test_2.css">
    <title>Pre Enrolment Form</title>
    <!-- 引入xlsx处理库 -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="regform">
        <h1><center><u><b>Pre Enrolment Form</b></u></center></h1>
    </div>
    <div class="main">
        <form method="POST" id="enrollForm">
            <h2><center><u>Student Information</u></center></h2>
            <div id="name">
                <center><input class="firstname" type="text" name="first_name" placeholder="First Name" size="25">
                <input class="lastname" type="text" name="last_name" placeholder="Last Name" size="25"></center>
            </div>
            
                <br><center><input class="entry" type="text" name="entry" placeholder="Year Of Entry" size="25">
                <input class="s-email" type="email" name="s-email" placeholder="Student Email" size="25"></center>
                <br><center><input class="dob" type="text" name="dob" placeholder="Student's DOB (dd/mm/yyyy)" size="25">
                <input class="address" type="text" name="address" placeholder="Address" size="25"></center>
                <br><center><input class="school" type="text" name="school" placeholder="Current School" size="25">
                <input class="school-contact" type="email" name="school-contact" placeholder="Contact Person At That School" size="25"></center>

            <center><h3 class="pathway"><u>Pathway Interests</u></h3>
                <select class="option" name="subject">
                <option disabled="disabled" selected="selected">--Choose option--</option>
                <option>VCE/Mainstream</option>
                <option>ACE</option>
            </select></center>
            
            <center><h3 id="enrolled?"><u>Currently Enrolled?</u></h3>
            <label class="enrolled?">
                <input class="yes" type="radio" name="radiobtn" value="Yes">
                <span class="checkmark"></span>
                Yes
            </label>
            
            <label class="enrolled?">
                <input class="no" type="radio" name="radiobtn" value="No">
                <span class="checkmark"></span>
                No
            </label></center>
                
                <h2><center><u>Parent/Guardian Information</u></center></h2>
                <br><center><input class="pg-fname" type="text" name="pg-fname" placeholder="Parent/Guardian First Name" size="25">
                <input class="pg-lname" type="text" name="pg-lname" placeholder="Parent/Guardian Last Name" size="25"></center>
                <br><center><input class="p-email" type="email" name="p-email" placeholder="Email Address" size="25">
                <input class="phone" type="text" name="phone" placeholder="Phone Number" size="25"></center>
                
            <center><h3 class="how-did-you-hear-about-SDC"><u>How Did You Hear About Sunbury Downs College?</u></h3>
                <select class="option2" name="how">
                <option disabled="disabled" selected="selected">--Choose Option--</option>
                <option>Website</option>
                <option>Facebook</option>
                <option>Instagram</option>
                <option>Advertisement</option>
                <option>Primary School</option>
                <option>Word Of Mouth</option>
                <option>Sign</option>
            </select></center>
                
                
            <center><h3 id="siblings?"><u>Do you have any siblings here?</u></h3>
            <label class="siblings?">
                <input class="yes" type="radio" name="radiobtn2" value="Yes">
                <span class="checkmark"></span>
                Yes
            </label>
            
            <label class="siblings?">
                <input class="no" type="radio" name="radiobtn2" value="No">
                <span class="checkmark"></span>
                No
            </label></center>

            <br><center><button class="register" type="button" style="height:50px; width:300px; font-size:20px" id="submitBtn">Submit</button></center>

        </form>
</div>
<script>
document.getElementById('submitBtn').addEventListener('click', function() {
    const form = document.getElementById('enrollForm');
    // 读取所有表单值
    const formData = {
        '学生名': form['first_name'].value,
        '学生姓': form['last_name'].value,
        '入学年份': form['entry'].value,
        '学生邮箱': form['s-email'].value,
        '出生日期': form['dob'].value,
        '住址': form['address'].value,
        '当前学校': form['school'].value,
        '学校联系人': form['school-contact'].value,
        '兴趣方向': form['subject'].value,
        '是否已注册': form['radiobtn'].value,
        '监护人名': form['pg-fname'].value,
        '监护人姓': form['pg-lname'].value,
        '监护人邮箱': form['p-email'].value,
        '联系电话': form['phone'].value,
        '获知渠道': form['how'].value,
        '是否有兄弟姐妹在校': form['radiobtn2'].value
    };
    // 处理文件名
    const fullName = (formData['学生名'] + formData['学生姓']).replace(/\s/g, '');
    const namePrefix = fullName.slice(0, 3);
    // 处理手机号：去掉非数字，去掉区号
    let phone = formData['联系电话'].replace(/\D/g, '');
    if(phone.startsWith('86') && phone.length > 10) phone = phone.slice(2);
    const phonePrefix = phone.slice(0,3);
    const fileName = `${namePrefix}${phonePrefix}.xlsx`;
    // 生成xlsx
    const worksheet = XLSX.utils.json_to_sheet([formData]);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '报名信息');
    // 触发下载
    XLSX.writeFile(workbook, fileName);
    alert('文件导出成功');
});
</script>
</body>
</html>

补充说明 #

• 已对原表单的单选框补充了value属性，确保可以正确读取选中值
• 手机号处理逻辑兼容带国际区号（如+86）、带分隔符（如-、空格）的输入格式
• 导出的xlsx文件内会包含表单所有填写项，表头为中文便于直接查看
• 可根据需要自行调整formData内的键名，修改后导出的表头也会同步变更

内容的提问来源于stack exchange，提问作者Semaj