导出无规则表格XLS,功能截图
image.png
image.png
核心代码
var tableHTML = document.querySelector("table").outerHTML;
var xlsContent= `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Excel.Sheet" />
</head>
<body>${tableHTML}</body>
</html>`;
var blob = new Blob([xlsContent], { type: "application/vnd.ms-excel" });
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "demo.xls";
a.innerHTML = "下载xls"
document.body.appendChild(a);
注意 布局必须是table元素，全部代码
<!DOCTYPerE html>
<html>
<head>
<meta charset="UTF-8">
<title>导出无规则excel表格</title>
<link rel="stylesheet" type="text/css" href="style/index.css"/>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th class="th" colspan="5">黎兹化妆品（上海）有限公司</th>
</tr>
<tr>
<th class="th" colspan="5">上海市闵行区吴中路1439号莱茵虹景中心B幢307室</th>
</tr>
<tr>
<th class="th" colspan="5">电话：（021）51688850</th>
</tr>
<tr>
<th class="th" colspan="5" >采购订单</th>
</tr>
<tr>
<th class="tr">
<div class="td"><div>委托方</div></div>
</th>
<th>
<div class="td">
<div>新协力包装制品有限公司上海分公司</div>
<div>地址：上海市长宁区天山路600弄思创大厦4号17A室</div>
<div>Attn: Linda Cheng</div>
<div>Tel:(86) 21 63808676</div>
</div>
</th>
<th>
<div>被委托方：</div>
</th>
<th colspan="2">
<div>黎兹化妆品（上海）有限公司</div>
<div>上海市闵行区吴中路1439号莱茵虹景B幢307室</div>
<div>电话：（021）5108 8850</div>
<div>传真：（021）5476 3025</div>
</th>
</tr>
<tr>
<th>
<div>收货方：</div>
</th>
<th style="background: #f00;color: #fff;">
<div>中山市新鑫彩印刷包装用品有限公司</div>
<div>广东省中山市三乡镇新圩村永泰昌街26号4栋2楼</div>
<div>Tel: 0760‐86616081 13229127435</div>
<div>Attn: Carol </div>
</th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th width="200">订单号码</th>
<th width="400">客人订单号码</th>
<th width="200">订单日期</th>
<th width="200">交货日期</th>
<th width="200">付款方式</th>
</tr>
<tbody>
<tr>
<td>XXL1170</td>
<td>PO 1170</td>
<td>04/27/2019</td>
<td>5/17/2019</td>
<td>出货后30天付款</td>
</tr>
</tbody>
<tr>
<td></td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
<td>总计RMB</td>
</tr>
<tr>
<td>L005-03-0110</td>
<td>U/C, Venus XL Eyeshadow Palette (Clear)</td>
<td>21000</td>
<td>￥1.11</td>
<td>￥2331310</td>
</tr>
<tr>
<td></td>
<td style="color: #f00;" colspan="4">备注：新协力提供1%免费备品</td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2">总计：</td>
<td class="th" colspan="2">￥2331310</td>
</tr>
<tr>
<td>总金额：</td>
<td class="th" colspan="4" >人民币贰万叁仟叁佰拾元整</td>
</tr>
<tr>
<td>订单条款：</td>
<td class="th" colspan="4" ></td>
</tr>
<tr>
<td>1.付款方式：</td>
<td class="th" colspan="4" >出货后30天付款</td>
</tr>
<tr>
<td>2.贸易方式：</td>
<td class="th" colspan="4" >被委托方应送货至委托方要求的指定地点或港口</td>
</tr>
<tr>
<td>3.质量要求：</td>
<td class="th" colspan="4" >按委托方质量标准严格执行并在委托方验货合格后方可出货</td>
</tr>
<tr>
<td>4.运输要求：</td>
<td class="th" colspan="4" >被委托方应确保出货产品包装牢固，并保障运输过程安全</td>
</tr>
<tr>
<td>制表人：</td>
<td class="th" colspan="2" style="background: #ff0;">Orange He</td>
<td>日期：</td>
<td>04/27/2019</td>
</tr>
<tr>
<td>审核人：</td>
<td class="th" colspan="2" >王叶伟</td>
<td>日期：</td>
<td>04/27/2019</td>
</tr>
</table>
</body>
<script type="text/javascript">
var tableHTML = document.querySelector("table").outerHTML;
var xlsContent= `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="ProgId" content="Excel.Sheet" />
</head>
<body>${tableHTML}</body>
</html>`;
var blob = new Blob([xlsContent], { type: "application/vnd.ms-excel" });
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "demo.xls";
a.innerHTML = "下载xls"
document.body.appendChild(a);
</script>
</html>
网友评论