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" ο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-->

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 的打印和下载相关推荐

定义任务打印gradle下载的jar包位置
//定义任务打印gradle下载的jar包位置task showMyCache { configurations.compile.each { println it }} 转载于:https://ww ...
vue +SpringBoot + FreeMarker + FlyingSaucer 实现PDF在线预览、打印、下载
在此,首先感谢这篇链接的博主我借助此文完成了我的需求,下载pdf简历 ,所以在此记录一笔项目的大概功能如下 vue的页面点击下载按钮就能下载简历 ,谷歌浏览器浏览器中点开这个简历如下这样的 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
撒罗满：2019年收集的最佳3D打印模型下载网站
大家对3D打印行业有所了解后,都会被他能实现我们想象中的模型而感到非常的厉害,想实现模型的话除了自己建模,应该都会下载3D打印模型的需求,在国内3D打印模型下载网站也是屈指可数. 很多想下载3D模型的 ...
js禁用浏览器 pdf 打印、下载功能（pdf.js 禁用打印下载、功能）
前端实现 pdf 预览方法 (1)用iframe标签src="文件地址"就可以直接打开,还可以设置width,height等属性.具体参考iframe属性. <iframe ...
进口付汇联的打印和下载，报关单进口付汇联的打印方法
2019年6月1日起,海关取消向企业提供纸质报关单收汇联和报关单付汇联,企业如需进口报关单付汇联和出口报关单收汇联,可进行自主打印. 企业可通过旭诺财税应用市场的[收付通]模块采集出口收汇报关单和进口 ...
关于html页面展现pdf文件，并隐藏打印、下载等按钮的总结
关于html页面展现pdf文件,并隐藏打印.下载等按钮的总结由于项目需求,要在页面预览pdf文件而不能提供下爱打印功能,故在网上查询了一些前辈的经验,自己也尝试了一番,现在讲经验总结一下. pdfo ...
xrdpdf卡片在哪可下载_暑假学习英语字母，就是这样简单(附可打印字母卡下载)...
英语字母是所有英语学习的基础,所以,要想学好英语,第一步,必须是学好字母,为后面的更深层次的学习打下坚实的根基.今天,我们给大家分享最全面的英文字母学习法,建议收藏,文章最后附上字母卡片,可以打印下载 ...
SpringBoot + FreeMarker + FlyingSaucer 实现PDF在线预览、打印、下载
关键技术点: 1. Freemarker模板引擎  模板语法 2. FlyingSaucer根据模板生成pdf  兼容中文(及中文换行问题)  兼容CSS(绝对.相对定位)  兼容图片  多 ...
2020年日历_2020年日历表打印版下载|2020年日历表打印版下载 - 巴士下载站
2020日历表打印版是11684小编从网络上整理的表格,共有两版,Excel文件是全年一页的,而doc文件是每月一张的格式,附带节气.农历,有需要的朋友欢迎在WWW.11684.COM下载使用. 20 ...

html 的打印和下载

html 的打印和下载相关推荐

最新文章

热门文章