h5页面生成excel表格文件
用途，主要用于表格类的输出,对json数据进行表格输出，不需要通过后端进行文件生成操作
js生成excel表格
用途，主要用于表格类的输出,对json数据进行表格输出，不需要通过后端进行文件生成操作
数据格式示例
var d={
name:'21321332',//项目名称
company:'',//项目实施单位
pro_desc:'',//项目简介
p_name:'',//项目负责人
phone:'',//联系电话
z_money:'',//文化产业资金支持金额
pay_type:'',//付款方式
jx:[//绩效目标
{
z_a:'12',//一级指标
z_b:'345',//二级指标
z_num:'78',//指标值
z_desc:'980',//指标说明
}
],
ssjh:[//实施计划
{
time:'2134',//计划期间
desc:'56666565',//阶段任务说明
},{
time:'2134hah',//计划期间
desc:'56666565111',//阶段任务说明
},
],
end_desc:'',//验收结论
end_fu:'',//验收小组签名-负责人
end_p:'',//验收小组签名-成员
shen_desc:'',//绩效评价-第三方审核意见
};创建table表格主题
//表格主题内容根据需求创建表格，建议先用excel写出table样式，然后进行赋值渲染，
//赋值中也可以实现循环列表
function excel_a() {
let text=`
<table class="table_a" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="6" class="title">项目实施计划任务书（基础工作类）</td></tr>
<tr><td style="border-left: .5pt solid #000" rowspan="5">基本信息</td><td>项目名称</td><td colspan="4">${d.name}</td></tr>
<tr><td>项目实施单位</td><td colspan="4">${d.company}</td></tr>
<tr><td>项目简介</td><td colspan="4">${d.pro_desc}</td></tr>
<tr><td>项目负责人</td><td>${d.p_name}</td><td>联系电话</td><td colspan="2">${d.phone}</td></tr>
<tr><td style="width:150px;">文化产业资金支持金额</td>${d.z_money}<td></td><td>付款方式</td><td colspan="2">${d.pay_type}</td></tr>
<tr><td style="border-left: .5pt solid #000" rowspan="${d.jx.length+1}">绩效目标</td><td>一级指标</td><td>二级指标</td><td>指标值</td><td colspan="2">指标说明</td></tr>
${d.jx.map(li => `
<tr><td>${li.z_a}</td><td>${li.z_b}</td><td>${li.z_num}</td><td colspan="2">${li.z_desc}</td></tr>
`).join('')}
<tr><td style="border-left: .5pt solid #000" rowspan="${d.ssjh.length+1}">实施计划</td><td>计划期间</td><td colspan="4">阶段任务说明</td></tr>
${d.ssjh.map(li => `
<tr><td>${li.time}</td><td colspan="4">${li.desc}</td></tr>
`).join('')}
<tr><td style="border-left: .5pt solid #000" rowspan="3">验收情况</td><td>验收结论</td><td colspan="4" style="height: 100pt;">${d.end_desc}</td></tr>
<tr><td rowspan="2">验收小组签名</td><td>负责人：</td><td colspan="3">${d.end_fu}</td></tr>
<tr><td>成员：</td><td colspan="3">${d.end_p}</td></tr>
<tr><td style="border-left: .5pt solid #000">绩效评价</td><td colspan="5" style="height: 120pt;">${d.shen_desc}</td></tr>
</table>
`;
//执行生成表格方法
excel(text, "基础工作类.xlsx");
}将table生成为表格文件
//生成excel执行方法
//style中为excel中表格样式，和css写法一样
function excel(data, filename) {
var head=`
<head>
<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>
</x:ExcelWorkbook></xml><![endif]-->
<style type='text/css'>
table.table_a td {mso-ignore: padding;mso-number-format: 'General';mso-generic-font-family: modern;mso-font-charset: 134;
mso-protection: locked visible;mso-rotate: 0;mso-pattern: auto;mso-background-source: auto;
text-align: left;vertical-align: middle;color: #000000;font-weight: 400;font-style: normal;text-decoration: none;line-height:3;
font-size: 16.0pt;font-family: 仿宋;border-bottom: .5pt solid #000;border-right: .5pt solid #000;word-wrap: break-word;
word-break: break-all;padding: 0 5px;height:40pt;}
table.table_a{width:900px;}
table.table_a tr:nth-child(1){border-bottom: .5pt solid #000;}
table.table_a tr td:nth-child(1){border-left: .5pt solid #000;}
table.table_a tr:nth-child(1) td:nth-child(1){border-left: 0;}
table.table_a td.title{border-right:none;font-weight: 600;font-size: 20pt;text-align: center;height: 80pt;}
</style>
</head>
`;
var html =
"<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
html += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
html += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>';
html += head;
html += "<body>";
html += data;
html += "</body>";
html += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(html);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = `${filename}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
相关文章
发表评论
评论列表
- 这篇文章还没有收到评论，赶紧来抢沙发吧~