公司项目需求中要做用html做一个PDF申请表的样式出来。有点意思，贴上来大家看看。

先上效果图：

 

 

 

 

 附上源代码：

HTML：

<div id="form">
        <h2>轻工行业职业技能等级评价考生申请表</h2>
        <table cellspacing="0" border="1px" class="table">
            <tr>
                <td style="width: 50px;" colspan="2">姓名</td>
                <td style="width: 70px;" colspan="2"><input class="a1" style="width: 85px;" type="text" value="" /></td>
                <td style="width: 50px;" colspan="2">性别</td>
                <td style="width: 60px;" colspan="2">
                    <div>
                        <select class="a2">
                            <option value="">请选择</option>
                            <option value="010">男</option>
                            <option value="021">女</option>
                        </select>
                    </div>
                </td>
                <td style="width: 80px;" colspan="2">文化程度</td>
                <td style="width: 120px;" colspan="2">
                    <div>
                        <select class="a3">
                            <option value="">请选择</option>
                            <option value="本科">本科</option>
                            <option value="研究生">研究生</option>
                            <option value="专科">专科</option>
                            <option value="高中及高中以下">高中及高中以下</option>
                        </select>
                    </div>
                </td>
                <td style="width: 120px;" colspan="2">联系电话</td>
                <td colspan="3" rowspan="5" style="width: 130px">
                    <!-- ifshow用于点击后隐藏 -->
                    <div class="ifshow">上传图片</div>
                    <input style="width: 80px;height: 30px;" type="file" id="picFile" onchange="readFile(this)" />
                    <img id="img" src="" alt="" style="width: 130px;" />
                </td>
            </tr>

            <tr>
                <td colspan="4">身份证号码</td>
                <td colspan="8">
                    <input id="idcard" class="a4" onblur="check1()" type="text" value="" style="width: 300px;" />
                </td>
                <td colspan="2">
                    <input id="phone" class="a5" onblur="check2()" type="text" value="" style="width: 120px;" />
                </td>
            </tr>

            <tr>
                <td colspan="2">工作单位</td>
                <td colspan="8">
                    <input class="a6" type="text" value="" style="width: 260px;" />
                </td>
                <td colspan="2">参加工作时间</td>
                <td colspan="2">
                    <!-- 参加工作时间选择器 -->
                    <el-date-picker class="a7" v-model="value1" type="month" placeholder="请选择"
                        style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                    </el-date-picker>
                </td>
            </tr>

            <tr>
                <td colspan="8">从事本职业(工种)工龄</td>
                <td colspan="2">
                    <div>
                        <select class="a8">
                            <option value="">请选择</option>
                            <option value="1年">1年</option>
                            <option value="1-3年">1-3年</option>
                            <option value="3-5年">3-5年</option>
                            <option value="5年以上">5年以上</option>
                        </select>
                    </div>
                </td>
                <td colspan="2">现工作岗位</td>
                <td colspan="2">
                    <input class="a9" type="text" value="" style="width: 120px;" />
                </td>
            </tr>

            <tr>
                <td colspan="2">联系地址</td>
                <td colspan="12">
                    <input class="a10" type="text" value="" style="width: 500px;" />
                </td>
            </tr>

            <tr>
                <td colspan="8">原证书职业名称及等级</td>
                <td colspan="4">
                    <input class="a11" type="text" value="" style="width: 200px;" />
                </td>
                <td colspan="2">原证书编号</td>
                <td colspan="3">
                    <input class="a12" type="text" value="" style="width: 130px;" />
                </td>
            </tr>

            <tr>
                <td colspan="4">申报职业</td>
                <td colspan="4">
                    <input class="a13" type="text" value="" style="width: 110px;" />
                </td>
                <td colspan="2">申报等级</td>
                <td colspan="2">
                    <input class="a14" type="text" value="" style="width: 120px;" />
                </td>
                <td colspan="2">原证书时间</td>
                <td colspan="3">
                    <!-- 原证书时间选择器 -->
                    <el-date-picker class="a15" v-model="value2" type="month" placeholder="请选择"
                        style="width: 130px;font-size: 16px;" format="yyyy年MM月">
                    </el-date-picker>
                </td>
            </tr>

            <tr>
                <td colspan="4">获奖情况</td>
                <td colspan="13">
                    <input class="a16" type="text" value="" style="width: 570px;" />
                </td>
            </tr>

            <tr>
                <td rowspan="2" colspan="2">本人工作简历</td>
                <td colspan="4">起止时间</td>
                <td colspan="6">何地何部门</td>
                <td colspan="2">职业(工种)</td>
                <td colspan="3">证明人</td>
            </tr>

            <tr>
                <td colspan="4">
                    <!-- 工作简历时间选择器 -->
                    <div>
                        <el-date-picker class="a17" v-model="value3" type="month" placeholder="请选择"
                            style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                        </el-date-picker>
                    </div>
                    <div style="margin: -3px 0;">至</div>
                    <div>
                        <el-date-picker class="a18" v-model="value4" type="month" placeholder="请选择"
                            style="width: 120px;font-size: 16px;" format="yyyy年MM月">
                        </el-date-picker>
                    </div>
                </td>
                <td colspan="6">
                    <input class="a19" type="text" value="" style="width: 260px;height: 100px;" />
                </td>
                <td colspan="2"><input class="a20" type="text" value="" style="width: 120px;height: 100px;" /></td>
                <td colspan="3"><input class="a21" type="text" value="" style="width: 130px;height: 100px;" /></td>
            </tr>

            <tr>
                <td rowspan="6" colspan="2">评价机构</td>
                <td colspan="4">评价职业</td>
                <td colspan="4">
                    <input type="text" value="" style="width: 140px;" />
                </td>
                <td rowspan="5" colspan="2">工作单位</td>
                <td rowspan="5" colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:110px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="4">评价等级</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>

            <tr>
                <td colspan="4">理论成绩</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>
            <tr>
                <td colspan="4">技能成绩</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>
            <tr>
                <td colspan="4">综合评审</td>
                <td colspan="4"><input type="text" value="" style="width: 140px;" /></td>
            </tr>

            <tr>
                <td colspan="8" style="height: 120px;">
                    <div style="margin-left:140px">
                        <div style="margin-top:50px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
                <td colspan="2">
                    轻工业职业<br />
                    能力评价总<br />
                    站或直属基<br />
                    地
                </td>
                <td colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:50px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="2" style="height: 150px">本人签字</td>
                <td colspan="8">
                    以上内容全部属实，申请人签字
                    <div style="margin-left:140px">
                        <div style="margin-top:68px; margin-bottom: 10px;">(签 字)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
                <td colspan="2">
                    中国轻工业<br />
                    联合会职业<br />
                    能力评价中
                    <br />心
                </td>
                <td colspan="5">
                    <div style="margin-left:140px">
                        <div style="margin-top:90px; margin-bottom: 10px;">(盖 章)</div>
                        <div>
                            <span style="margin-right: 20px">年</span>
                            <span style="margin-right: 20px">月</span>
                            <span>日</span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <div style="font-size: 13px; line-height: 20px;text-align: left;">
            此页一式两份，需附毕业证复印件、身份证复印件、学生证复印件、职称证书复印件、相关专业职业资格证书或技能等级证书复印件、工作证明、获奖证书复印件等。表中所填内容擅自更改或删减视为无效。
        </div>
        <div>
            <span>手机验证码:</span>
            <input class="verification-code" placeholder="请输入验证码" type="text" value=""
                style="width: 140px;border: 1px solid rgb(199, 198, 198); " />
            <button onclick="getCode()" class="getCode" type="button" style="height: 35px;position: relative;
            top: 2px;">获取验证码
            </button>
        </div>
        <div style="margin-top: 5px;">
            <button type="button" onclick="submit()" style="font-size :20px;width: 80px;height: 45px;">提交</button>
        </div>
    </div>
</div>

JS：

//图片上传
function readFile(obj) {
    var file = obj.files[0];
    //判断类型是不是图片 
    if (!/image\/\w+/.test(file.type)) {
        alert("请确保文件为图像类型");
        return false;
    } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            dealImage(this.result, {
                quality: 0.5
            }, function (base) {
                //调用
                var blob = dataURLtoBlob(base);
                var newFile = new File([blob], file.name, {
                    type: file.type
                });
                console.log(newFile)
                let r = new FileReader(); //本地预览
                r.onload = function () {
                    $('#img').attr("src", r.result);
                    //将上传图片字体隐藏起来
                    $('.ifshow').hide();
                }
                r.readAsDataURL(newFile); //Base64
                // upload(newFile);
            });
        }
    }
}
//将base64转换为blob
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

function upload(file) {
    var that = this;
    // 创建form对象
    let param = new FormData();
    // 通过append向form对象添加数据
    param.append('img', file);
    // 文件大小
    param.append('size', file.size);
    for (var n in that.params) {
        param.append(n, that.params[n]);
    }
    // 创建ajax
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        console.log(xhr.responseText)
    }
    xhr.open("POST", "yourapi", true);
    // 发送表单数据
    xhr.send(param);
}
/**
 * 图片压缩，默认同比例压缩
 * @param {Object} path
 * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 * obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 * 回调函数有一个参数，base64的字符串数据
 */
function dealImage(path, obj, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = obj.quality || 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}

//身份证号码验证
function check1() {
    //获取身份证号码值
    let idcard = $('#idcard').val();
    //先用正则判断是否为正确的格式
    let partn = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if (partn.test(idcard) == false) {
        $('.a4').val('');
        alert('请检查身份证号码格式是否正确');
        return false;
    } else {
        let number = [...idcard]; //es6语法，利用...将变量的值转成数组。
        let ration = new Array("7", "9", "10", "5", "8", "4", "2", "1", "6", "3", "7", "9", "10", "5", "8", "4", "2"); //系数
        let ration22 = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
        let sum = 0;
        console.log(ration);
        for (let i = 0; i < number.length - 1; i++) {
            sum = number[i] * ration[i] + sum;
            console.log(i);
        }
        let mod = sum % 11;
        if (ration22[mod] == number[17]) {

        } else {
            $('.a4').val('');
            alert('最后一位校验错误');
        }
    }
}

//手机号验证
function check2() {
    //获取手机号值
    let phone = $('#phone').val();
    //先用正则判断是否正确
    let b = /^1(3|4|5|6|7|8|9)\d{9}$/;
    if (b.test(phone)) {
        return true;
    } else {
        $('a5').val('');
        alert('请检查手机号是否正确');
        return false;
    }
}

//获取验证码
function getCode() {
    //获取手机号值
    var phone = $('#phone').val();
    //先用正则判断是否正确
    var b = /^1(3|4|5|6|7|8|9)\d{9}$/;
    if (!b.test(phone)) {
        $('a5').val('');
        alert('手机号输入有误！请重新输入');
        return;
    } else {
        //本地接口还没有弄好，直接codetime(60)
        codetime(60)
        // $.ajax({
        // type: 'POST',
        // headers: {},
        // url: "接口",
        // data: {
        //     'phone': phone
        // },
        //     success: function (data) {
        //         if (data == 456) {
        //             alert.msg("验证码在三分钟之内都有效,无需重新获取");
        //         } else {
        //             codetime(60);
        //         }
        //     }
        // })
    }
}
//codetime函数注释
function codetime(time) {
    var _this = $(".getCode");
    if (time == 0) {
        _this.attr("disabled", false);
        _this.html("发送验证码");
        _this.css('background-color', '#409eff');
        _this.css('color', 'white');
    } else {
        _this.attr("disabled", true);
        _this.html("重新发送(" + time + ")");
        _this.css('background-color', '#fafafa');
        _this.css('color', '#999');
        time--;
        setTimeout(function () {
            codetime(time);
        }, 1000)
    }
}

//提交前的验证
function submit() {
    a1 = $('.a1').val()
    a2 = $('.a2').val()
    a3 = $('.a3').val()
    a4 = $('.a4').val()
    a5 = $('.a5').val()
    a6 = $('.a6').val()
    a7 = $('.a7').val()
    a8 = $('.a8').val()
    a9 = $('.a9').val()
    a10 = $('.a10').val()
    a11 = $('.a11').val()
    a12 = $('.a12').val()
    a13 = $('.a13').val()
    a14 = $('.a14').val()
    a15 = $('.a15').val()
    a16 = $('.a16').val()
    a17 = $('.a17').val()
    a18 = $('.a18').val()
    a19 = $('.a19').val()
    a20 = $('.a20').val()
    a21 = $('.a21').val()
    verificationCode = $('.verification-code').val()
    if (a1 == "" || a1 == null) {
        alert('请填写姓名');
    } else if (a2 == "" || a2 == null) {
        alert('请填写性别');
    } else if (a3 == "" || a3 == null) {
        alert('请填写文化程度');
    } else if (a4 == "" || a4 == null) {
        alert('请填写身份证号码');
    } else if (a5 == "" || a5 == null) {
        alert('请填写联系电话');
    } else if (a6 == "" || a6 == null) {
        alert('请填写工作单位');
    } else if (a7 == "" || a7 == null) {
        alert('请填写参加工作时间');
    } else if (a8 == "" || a8 == null) {
        alert('请填写工龄');
    } else if (a9 == "" || a9 == null) {
        alert('请填写现工作岗位');
    } else if (a10 == "" || a10 == null) {
        alert('请填写联系地址');
    } else if (a11 == "" || a11 == null) {
        alert('请填写原证书职业名称及等级');
    } else if (a12 == "" || a12 == null) {
        alert('请填写原证书编号');
    } else if (a13 == "" || a13 == null) {
        alert('请填写申报职业');
    } else if (a14 == "" || a14 == null) {
        alert('请填写申报等级');
    } else if (a15 == "" || a15 == null) {
        alert('请填写原证书时间');
    } else if (a16 == "" || a16 == null) {
        alert('请填写获奖情况');
    } else if (a17 == "" || a17 == null) {
        alert('请填写工作简历开始时间');
    } else if (a18 == "" || a18 == null) {
        alert('请填写工作简历结束时间');
    } else if (a19 == "" || a19 == null) {
        alert('请填写何地何部门');
    } else if (a20 == "" || a20 == null) {
        alert('请填写职业(工种)');
    } else if (a21 == "" || a21 == null) {
        alert('请填写证明人');
    } else if (verificationCode == '' || verificationCode == null) {
        alert('请填写验证码')
    } else {
        alert('提交成功')
    }
}

 

时间选择器中引入了element-ui

CSS：
//时间选择器的样式只能用 scoped实现
<style scoped>
    .el-input__inner {
        border: none;
        color: black;
        width: 120px;
    }

    .el-input--prefix .el-input__inner {
        padding: 0;
    }

    .el-input__icon {
        display: none;
    }
</style>

其他：
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
}
#form {
	margin: 0 auto;
	width: 744px;
}
.table {
	margin: 0 auto;
}
input {
	height: 35px;
	font-size: 16px;
	text-align: center;
	box-sizing: border-box;
	/* 去掉input的边框和点击时的边框 */
	border: none;
	outline: medium;
}
select {
	/*清除select默认样式*/
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	/* 去掉select的边框和点击时的蓝色边框 */
	border: none;
	outline: none;

	font-size: 16px;
	text-align: center;
}
button{
	font-size: 18px;
	color: white;
	background-color:#409eff;
	border: 1px solid rgb(199, 198, 198); 
	border-radius: 5px;
}