html 的打印和下载

先打印    页面样式

<!--确权  结果  --><!--startprint3--><div id="qqjgdetails" class="white_content_cksqxq"  style="width:968px;height: 549px;font-family: MicrosoftYaHei;font-size:12px;border-radius: 5px;"><div style="font-size: 18px;color: #4d4d4d;margin-top: 52px;margin-left:409px; ">商品通云仓物权凭证</div><div style="font-size: 12px;color: #4d4d4d;margin-bottom: 10px;margin-top: 30px;"><label style="margin-left: 30px;">申请时间：</label><label id="rksqxqsqsj" style="margin-right: 610px;">2017.11.15</label><label>申请编号：</label><label id="rksqxqckbh">EX2017101500005</label></div><input hidden="hidden" id="rksqxqid"/><img id="gbtb3" onclick="$('#qqjgdetails').hide();$('#fade').hide();" th:src="@{/static/images/audit/btn_cancel.png}"  style="position: absolute;left:98%;top:1%;cursor: pointer;"/><img id="shtp3" th:src="@{/static/images/audit/zhang.png}"  style="position: absolute;left:79%;top:41%;" hidden="hidden"/><div id="dyxz3" hidden="hidden" style="font-size: 10px;font-family: MicrosoftYaHei;margin-right: 30px;float:right;margin-top: -55px;"><a type="button" id="down_button3"><input type="button" style="width: 48px;height: 20px;border-radius: 2px;margin-right: 24px;border: solid 1px #c3c3c3;border:1px;background-color: #74bdff;color: #ffffff;" value="下载"></a><button onclick="prints3()" style="width: 48px;height: 20px;border-radius: 2px;border:1px;color: #c3c3c3;background-color:white;border: solid 1px #c3c3c3;">打印</button></div<div style="width: 908px;height: 240px;border: solid 1px #dddddd;color: #7f7f7f;margin-left: 30px;"><div style="float:left;width: 96px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px; "><div style="margin-top: 11px;margin-left: 10px;">贸易商名称</div></div><div style="float:left;width: 332px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px;"><div id="rksqxqckmc" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库名称</div></div><div style="float:left;width: 114px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px;"><div style="margin-top: 11px;margin-left: 10px;">仓库名称</div></div><div style="float:left;width: 363px;border-bottom:solid 1px #dddddd;border-right: none;height: 37px;"><div id="rksqxqckdz" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库地址</div></div><div style="float:left;width: 54px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">序号</div></div><div style="float:left;width: 128px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">行业分类</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">品名</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">包装</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">单位</div></div><div style="float:left;width: 87px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">数量</div></div><div style="float:left;width: 93px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">单价</div></div><div style="float:left;width: 100px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">金额</div></div><div style="float:left;width: 168px;border-bottom:solid 1px #dddddd;border-right: none;height: 44px; "><div style="margin-top: 14px;text-align: center;">备注</div></div><div style="float:left;width: 54px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div style="margin-top: 14px;text-align: center;">1</div></div><div style="float:left;width: 128px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqpm" class="qctjnr" style="margin-top: 14px;text-align: center;">品名</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqgg" class="qctjnr" style="margin-top: 14px;text-align: center;">规格</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqbz" class="qctjnr" style="margin-top: 14px;text-align: center;">包装</div></div><div style="float:left;width: 90px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqdw" class="qctjnr" style="margin-top: 14px;text-align: center;">单位</div></div><div style="float:left;width: 87px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqcksl" class="qctjnr" style="margin-top: 14px;text-align: center;">入库 数量</div></div><div style="float:left;width: 93px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqdj" class="qctjnr" style="margin-top: 14px;text-align: center;">单价</div></div><div style="float:left;width: 100px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 44px; "><div id="rksqxqje" class="qctjnr" style="margin-top: 14px;text-align: center;">金额</div></div><div style="float:left;width: 168px;border-bottom:solid 1px #dddddd;border-right: none;height: 44px; "><div id="rksqxqzb" class="qctjnr" style="margin-top: 14px;text-align: center;">备注</div></div><div style="width: 638px;height: 36px;color: #7f7f7f;border-bottom:solid 1px #dddddd;border-right:solid 1px #dddddd;float: left;"><div style="margin-left: 10px;margin-top: 10px;float: left;">合计金额</div><div id="rksqxqbw" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 34px;margin-top: 10px;">叁</div><div style="float: left;margin-left: 16px;margin-top: 10px;">佰</div><div id="rksqxqsw" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">伍</div><div style="float: left;margin-left: 16px;margin-top: 10px;">拾</div><div id="rksqxqw" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">万</div><div id="rksqxqq" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">仟</div><div id="rksqxqb" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">佰</div><div id="rksqxqs" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">拾</div>    <div id="rksqxqy" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">元</div>    <div id="rksqxqj" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">角</div>    <div id="rksqxqf" class="qctjnr" style="float: left;color: #4d4d4d;margin-left: 22px;margin-top: 10px;">零</div><div style="float: left;margin-left: 16px;margin-top: 10px;">分</div>    </div><div style="width:100px;height:36px;border-bottom:solid 1px #dddddd;border-right:solid 1px #dddddd;float: left;text-align: center;"><div id="rksqxqjehd" class="qctjnr" style="margin-top: 10px;">￥3500000</div></div><div style="width:168px;height:36px;border-bottom:solid 1px #dddddd;border-right:none;float: left;text-align: center;"><div id="rksqxqjesm" class="qctjnr" style="margin-top: 10px;">￥3500000</div></div><div style="float:left;width: 96px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px; "><div style="margin-top: 11px;margin-left: 10px;">贸易商操作员</div></div><div style="float:left;width: 332px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px;"><div  id="rksqxqckr" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库名称</div></div><div style="float:left;width: 114px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 37px;"><div style="margin-top: 11px;margin-left: 10px;">贸易商审核员</div></div><div style="float:left;width: 363px;border-bottom:solid 1px #dddddd;border-right: none;height: 37px;"><div id="rksqxqfhr" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库地址</div></div><div style="float:left;width: 96px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 36px;border-top: none;border-bottom:none; "><div style="margin-top: 11px;margin-left: 10px;">仓库操作员</div></div><div style="float:left;width: 332px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 36px;border-top: none;border-bottom:none;"><div id="rksqxqjzr" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库名称</div></div><div style="float:left;width: 114px;border-bottom:solid 1px #dddddd;border-right: solid 1px #dddddd;height: 36px;border-top: none;border-bottom:none;"><div style="margin-top: 11px;margin-left: 10px;">仓库审核员</div></div><div style="float:left;width: 363px;border-bottom:solid 1px #dddddd;border-right: none;height: 36px;border-top: none;border-bottom:none;"><div id="rksqxqthr" class="qctjnr" style="margin-top: 11px;margin-left: 10px;">仓库地址</div></div></div></div><!--endprint3-->

js

function prints3(){$("#dyxz3").hide();$("#gbtb3").hide(); // 获取当前页的html代码      var bdhtml = window.document.body.innerHTML      // 设置打印开始区域      var startStr = '<!--startprint3-->'      // 设置打印结束区域      var endStr = '<!--endprint3-->'      // 从标记里获取需要打印的页面      var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr))　　// 也可以通过id获取　　// var printHtml = document.getElementById('printid').innerHTML      // 需要打印的页面      window.document.body.innerHTML = printHtml      window.print();      // 还原界面      window.document.body.innerHTML = bdhtml      window.location.reload();      $("#gbtb3").show();}

下载   js

 $("#down_button3").click(function(){$("#dyxz3").hide();$("#gbtb3").hide();html2canvas($("#qqjgdetails"), {  allowTaint:true,        height: $("#qqjgdetails").outerHeight() + 700,        onrendered : function(canvas) {         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url               window.location.href= imgUri; // 下载图片          }    });  $("#gbtb3").show();document.getElementById('qqjgdetails').style.display='none';document.getElementById('fade').style.display='none';});

用了  html2canvas 这个插件   这个插件要修改点东西  来调整幕高宽  具体的修改   我也忘了。有需求就百度一下吧，我记得蛮多博客都有的