先打印? ? 頁面樣式

<!--確權 結果 --><!--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" οnclick="$('#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 οnclick="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 = printHtmlwindow.print();// 還原界面window.document.body.innerHTML = bdhtmlwindow.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 這個插件? ?這個插件要修改點東西? 來調整幕高寬? 具體的修改? ?我也忘了。有需求就百度一下吧，我記得蠻多博客都有的

總結

以上是生活随笔為你收集整理的html 的打印和下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。