功能描述
把form表单填写的数据导出为word文档，格式为 标题：值 的表格数据形式。隐藏的input 不显示，复选框的值以逗号分隔。可自定义的文档标题和文档名称。
先上效果图
页面表单：
1594092561(1).jpg
导出doc 效果：
1594092615(1).jpg
代码实现
//html
<div id="copy">
<input type="hidden" value="w33" name="idd" />
<div><label>名称:</label><input type="text" value="" title="姓名" /></div>
<div><label>电话:</label><input type="tel" value="" title="电话" /></div>
<div><label>年龄:</label><input type="number" value="" title="年龄" /></div>
<div>
<label>性别:</label><input type="radio" name="dd" title="性别" value="男" /><label>男</label>
<input type="radio" name="dd" title="性别" value="女" /><label>女</label>
</div>
<div>
<label>身份:</label><input type="checkbox" name="cg" title="身份" value="党员" /><label>党员</label>
<input type="checkbox" name="qz" title="身份" value="群众" /><label>群众</label>
<input type="checkbox" name="mx" title="身份" value="演员" /><label>演员</label>
</div>
<div>
<select title="地址" name="dz" title="地址">
<option value="北京">北京</option>
<option value="广州">广州</option>
<option value="上海">上海</option>
</select>
</div>
</div>
<a id="gg">下载</a>
</body>
//js
class exportHtml {
constructor(type, fileName,title,formid) {
this.type = type
this.fileName = fileName
this.title = title
this.formId = formid
}
exportHtmls(htmls) {
let a = document.createElement('a');
let type = '';
let afterword = '';
let html = "<html><head><meta charset='utf-8' /></head><body><h1 style='text-align:center'>" + this.title +
"</h1>" +htmls + "</body></html>";
switch (this.type) {
case 'doc':
type = "application/msword"
afterword = '.doc'
break;
case 'xls':
type = "application/vnd.ms-excel"
afterword = '.xls'
break;
}
let blob = new Blob([html], {
type: type
})
a.href = URL.createObjectURL(blob);
a.download = this.fileName;
document.querySelector('body').appendChild(a)
a.click();
a.remove()
}
exportForm(){
let htmls = '';
let tr = '';
let tabledata = [];
let titles = []
$(this.formId+' input,'+this.formId+' select,'+this.formId+' textarea').each(function() {
if ($(this).attr('type') == 'hidden') {
} else if ($(this).attr('type') == 'radio') {
if ($(this).is(':checked')) {
tabledata.push({
name: $(this).attr('title'),
value: $(this).val()
})
titles.push($(this).attr('title'))
}
} else if ($(this).attr('type') == 'checkbox') {
if ($(this).is(':checked')) {
let t = $(this).attr('title')
let index = titles.indexOf(t)
if (index >= 0) {
tabledata[index].value.push($(this).val())
} else {
tabledata.push({
name: $(this).attr('title'),
value: [$(this).val()]
})
titles.push($(this).attr('title'))
}
}
} else {
tabledata.push({
name: $(this).attr('title'),
value: $(this).val()
})
titles.push($(this).attr('title'))
}
})
tabledata.forEach(function(item) {
tr += '<tr><td style="padding:5px 10px;background:#efefef;">' + item.name +
'</td><td style="padding:5px 10px;">' + item.value + '</td></tr>'
})
htmls =
'<table style="width:500px;margin:0 auto;border:1px solid #efefef" border="0" cellspacing="0" cellpadding="0">' +
tr + '</table>'
this.exportHtmls(htmls)
}
}
let ef = new exportHtml('doc','人员信息.doc','人员信息','#copy')
$('#gg').click(function() {
ef.exportForm()
})
