技术标签： html
使用jquery.jqprint实现打印效果
其中需要<link rel="stylesheet" type="text/css" media="print" href="css/parint.css" />来引入打印时的样式
jquery.jqprint 配置
function print(){
$("#print").jqprint({
debug: false,
importCSS: true,
printContainer: true,
operaSupport: false
});
}
事件调用即可
function doPrint() {
print()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://www.young51.com/style/js/common/jquery.tools.min.js"></script>
<script src="http://jserp.jinlejia.com/style/bootstrap/js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.jqprint-0.3.js"></script>
<link rel="stylesheet" type="text/css" media="print" href="css/parint.css" />
</head>
<style>
html, body, div, span,h1, h2, h3, h4, h5, h6, p, blockquote,a, em, img, q, dl, dt, dd, ul, li, form, label, legend {
margin:0px;
padding:0px;
border:0px;
font-size:14px;
font-family:'寰蒋闆呴粦';
}
*{margin:0px;padding:0px;}
a img{border: none; }
a{text-decoration:none;}
ul, ol, li{ list-style: none; }
a,button{text-decoration:none; }
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-appearance:none;font-size:100%}
body{background:#fff;}
input{outline:none}
input,textarea,select,option{ font-family:'寰蒋闆呴粦'}
.clear{ clear:both; font-size:0;}
iframe{border:none}
/*以下样式复制*/
.print_div{width: 800px; height: 740px; margin: 0px auto; margin-top: 100px;}
.print_left{width: 160px; padding-right: 10px; border-right:1px #ccc solid; height: 740px; box-sizing: border-box; float: left;}
.print_left h3{color: #000;font-size: 16px;}
.input_div{width: 100%; margin-top: 15px; display: inline-block;}
.inp{width: 125px; height: 25px; float: left; border: 1px #ccc solid; box-sizing: border-box; padding-left: 5px; line-height: 25px;}
.input_div span{float: left; margin-left: 5px; line-height: 25px;}
.buttonT{width: 100px; height: 30px; border-radius: 5px; background: #4b739a; line-height: 30px; text-align: center;
color: #fff; border: 0; font-size: 14px; cursor: pointer; margin-top: 20px;}
.print_right{width:630px;float: left; }
.print_right h1{font-size: 20px; display: inline-block; text-align: center; width: 100%;}
.img_div{width: 440px; height: 520px; margin: 0px auto; margin-top: 20px; cursor: pointer;}
.price_content{width: 100%; height: 80px; margin-top: 20px;}
.pric_left{width: 150px; height: 80px; float: left; margin-left: 100px;}
.pric_left span{font-size: 20px; font-weight: bold; color: #000;width: 100%; display: inline-block; margin-top: 25px;}
.pric_left em{ color: #000;width: 100%; display: inline-block; font-style: normal;}
.pric_right{width: 300px;float: left;}
.pric_right strong{width: 100%; display: inline-block; font-size: 20px; padding-bottom: 10px;}
.pric_right ul{width: 100%;}
.pric_right ul li{width:50%; float: left; line-height: 24px;}
.logo_img{width: 440px; height: 30px; background: #4f4b4a; margin-top: 10px;text-align: center; float: left; margin-left: 95px;}
.login_name{width: 100%; line-height: 30px; font-weight: bold;}
.img_house{width: 696px; height: 500px; position: absolute; top: 50%; left: 50%; margin-left: -348px; margin-top: -250px;
background: #fff; border: 1px #ccc solid; box-sizing: border-box; padding: 15px;display: none; z-index: 99999;}
.img_h_top{width: 100%; height: 30px; border-bottom: 1px #ccc solid;}
.img_h_top strong{float: left; color: #000;}
.img_h_top span{float: right;color: #000; cursor: pointer;}
.img_list{width: 100%; height: 328px; overflow-y: auto;}
.img_list ul{width: 100%;}
.img_list ul li{width: 120px; height: 142px; float: left;margin-left: 10px; margin-top: 15px; position: relative; cursor: pointer;}
.button_div{width: 100%; margin-top: 10px; text-align: center;}
.bg2zb,.popIframezb {
background-color: #666; display:none;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
}
.popIframezb {
filter:alpha(opacity=0);/*IE*/
opacity:0;/*FF*/
}
.yechonce{width: 20px; height: 20px; position: absolute; bottom: 0; right: 0;display: none;}
canvas{margin: 0px auto;}
.canvas_div{width: 670px; height: 810px; background: #fff; border: 1px #ccc solid; padding: 19px; box-sizing: border-box; position: absolute;
margin-left: -335px; margin-top: -405px; left: 50%; top: 50%; display: none; z-index: 99999;}
.can_d_top{line-height: 30px; float: left; color: #000;width: 100%; height: 30px;}
.can_d_top strong{font-size: 16px; float: left; }
.can_d_top span{font-size: 16px; float: right; cursor: pointer;}
</style>
<script>
function print(){
$("#print").jqprint({
debug: false,
importCSS: true,
printContainer: true,
operaSupport: false
});
}
var index = -1;
var hkey_root,hkey_path,hkey_key;
hkey_root="HKEY_CURRENT_USER";
hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
function check(e) {
var re = /^\d+(?=\.{0,1}\d+$|$)/
if (e.value != "") {
if (!re.test(e.value)) {
alert("请输入正确的数字");
e.value = "";
e.focus();
}
}
}
function OnInput1(event){
if(!isNaN(event.target.value)){
console.log(event.target.value)
$('.pric_left span').find('.font_size').html(event.target.value)
}
}
function OnInput2(event){
if(event.target.value!=null || event.target.value !=''){
$('.login_name span').html(event.target.value)
}
}
function OnInput3(event){
if(event.target.value!=null || event.target.value !=''){
$('.login_name font').html(event.target.value)
}
}
function save(){
$('.can_d_bottom').html('');
html2canvas(document.querySelector("#print")).then(canvas => {
$('.can_d_bottom').append(canvas)
});
$("#popIframezb").show();
$("#bg2zb").show();
$('.canvas_div').show();
}
function doPrint() {
print()
}
$(function(){
$('.can_d_top span').click(function(){
$(".canvas_div").hide();
$("#popIframezb").hide();
$("#bg2zb").hide();
})
$('.img_src').click(function(){
$(".img_house").show();
$("#popIframezb").show();
$("#bg2zb").show();
})
$('.img_h_top span').click(function(){
$(".img_house").hide();
$("#popIframezb").hide();
$("#bg2zb").hide();
})
$('.img_list ul li').click(function(){
$('.img_list ul li').find('.yechonce').hide();
$(this).find('.yechonce').show();
index = $(this).index()
})
$('.cancel').click(function(){
$(".img_house").hide();
$("#popIframezb").hide();
$("#bg2zb").hide();
index = -1;
})
$('.sure_bt').click(function(){
var src = $('.img_list ul li .img_c').eq(index)[0].src;
$('.img_src').attr('src',src);
$(".img_house").hide();
$("#popIframezb").hide();
$("#bg2zb").hide();
})
})
</script>
<body>
<div id="bg2zb" class="bg2zb" style="display:none;">
</div>
<div class="canvas_div">
<div class="can_d_top">
<strong>保存打印纸请右键另存为！</strong>
<span>X</span>
</div>
<div class="can_d_bottom"></div>
</div>
<div class="img_house">
<div class="img_h_top">
<strong>选择户型图</strong>
<span>X</span>
</div>
<div class="img_list">
<ul>
<li>
<div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
<img class="img_c" src="img/12.jpg" width="120" height="142" />
</li>
<li>
<div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
<img class="img_c" src="img/13.jpg" width="120" height="142" />
</li>
<li>
<div class="yechonce"><img src="img/yechonce.png" width="20" height="20"></div>
<img class="img_c" src="img/14.jpg" width="120" height="142" />
</li>
</ul>
</div>
<div class="button_div">
<button class="buttonT sure_bt">确定</button>
<button class="buttonT cancel">取消</button>
</div>
</div>
<div class="print_div">
<div class="print_left">
<h3>自定义</h3>
<div class="input_div">
<input class="inp" placeholder="房价" οninput="OnInput1(event)" οnblur="check(this)" οnkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"/><span>万</span>
</div>
<div class="input_div">
<input class="inp" placeholder="登录人姓名" οninput="OnInput2(event)"/>
</div>
<div class="input_div">
<input class="inp" placeholder="电话号码" οninput="OnInput3(event)"/>
</div>
<button class="buttonT" style="margin-top: 350px;" οnclick="save();" >预览图片</button>
<button class="buttonT" οnclick="doPrint()">打印</button>
</div>
<!--startprint-->
<div class="print_right" id="print">
<h1>洛卡小镇</h1>
<div class="img_div">
<img class="img_src" id="img_src" src="img/12.jpg" width="440" height="520" />
</div>
<div class="price_content">
<div class="pric_left">
<span><font class="font_size">510</font>万</span>
<p><span></span><span></span><span></span></p>
</div>
<div class="pric_right">
<strong>户型：3室2厅1卫</strong>
<ul>
<li>面积：200m²</li>
<li>楼层：100层共110层</li>
<li>朝向：南北</li>
<li>装修：豪装</li>
</ul>
<div class="login_name"><span>登录人姓名</span>：<font>XXX</font></div>
</div>
<div class="logo_img">
<img class="img_logo" id="img_logo" src="img/bglogo.png">
</div>
</div>
</div>
<!--endprint-->
</div>
</body>
</html>
TK1(远程主机)系统环境：ubuntu14.04 + ros-indigo-desktop笔记本电脑(主机)系统环境：ubuntu14.04 + ros-indigo-desktop-fullTK1(远程主机)配置Ctrl+Alt+T打开终端mkdir -p mrobot_ws/src //创建src文件夹cd ~/mrobot_ws/srccatkin_in..._mrobot
#include <stdio.h> /* printf, scanf, NULL */#include <stdlib.h> /* malloc, free */struct node{ int key; struct node *left, *right, *point;};typedef str..._bst insert
Problem DescriptionA Fibonacci sequence is calculated by adding the previous two members the sequence, with the first two members being both 1.F(1) = 1, F(2) = 1, F(3) = 1,F(4) = 1, F(n>4) = F(n
第一章1.设计现代OS的主要目标是什么？方便性，有效性，可扩充性和开放性。方便性：系统可以使用编译命令将用户采用高级语言书写的程序翻译成机器代码，或者直接通过OS所提供的各种命令操作计算机系统。有效性：提高系统资源的利用率；提高系统的吞吐量可扩充性：能方便地增添新的功能和模块，以及对原有的功能和模块进行修改开放性：使得不同厂家按照标准生产的软、硬件都能在本国范围内很好地相互兼容2.OS的作用可表现在哪几个方面？作为用户与计算机硬件系统之间的接口：OS处于用户与计算机硬件系统之间。用户通过OS_汤小丹第四版课后答案
一、成果项目背景电视技术在经历了从黑白到彩色、从模拟到数字的技术变革之后正在酝酿另一场技术革命，从单纯观看二维场景的平面电视跨越到展现三维场景的立体电视。立体电视，又称三维电视(3DTV)，提供了更为丰富的视觉信息和更具临场感的观看效果，在我国数字家庭娱乐、文化创意、教育培训等领域具有广阔的应用前景，3DTV代替传统的二维平面显示将是大势所趋。突破3DTV节目制作、传输、播出的关键技术，研制具_avs 高清
Windows10下安装MySQL8.01：首先去官网下载安装包下载地址：https://dev.mysql.com/downloads/mysql/ 这是我下载版本2：将解压文件解压到你安装的目录：E:\mysql-8.0.11-winx64 （我这是放在E盘根目录，不要放在有中文名字和空格的的目录下.例如）3：在mysql-8.0.11-winx64文件夹下面新建一个my.ini文件和一个data文件夹my.ini内容：[mysqld]# 设置330.._windows10 部署 mysql8
设p(G)为G的连通分支个数点割集设点集V'为点集V的真子集，若p(G-V')>p(G)，且对于V'的真子集V''，有p(G-V'')=p(G)，则称V'为点割集。也就是说，只要移除这些点，图的连通分支会变多，而且这些点每一个多余的，必须全部被移除才能分割图。若只需要移除一个顶点就能让联通分支变多，那么该点称为割集点连通度记为，定义为min{|V'| |V'是G的点割集或V'使(G-V')成为平凡图}即计算min{n-1,最小的点割集的点数量}。这里之所以有个n-1，是因为定义_v'是无向简单连通图g的点割,g-v'有几个连通分图
springboot基于SpringBoot的在线古玩市场系统的设计与实现。基于JAVA房产销售平台计算机毕业设计源码+系统+lw文档+部署。前端技术：Layui、HTML、CSS、JS、JQuery等技术。springboot基于B_S架构的视频监控系统的设计与实现。springboot基于SpringBoot智能家电商城。springboot基于微信小程序的二手商城。ssm基于JAVA的OA办公系统的设计与实现。ssm基于SSM的民宿预订管理系统设计与实现。ssm基于用户行为的自动化书籍推荐系统。
刚开始入门前端，想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。步骤如下： 1、编写HTML代码： 创建一个弹幕显示墙，以及两个按钮，分别为“发送”和“清屏”，并在文本框中设置placeholder为“说点什么吧？”以提示用户在此输入弹幕信息。
/Users/macbook/Library/Developer/Xcode/DerivedData/MapViewDemo: No such file or direc版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Fantasy_Jun/article/details/78270543...
推荐：一套SpringCloud电商项目，拿来即用!01悲剧7月22日下午3点多，成都天府软件园C区，一名程序员从6楼跳下身亡。事发后民警立刻出警，跳楼原因还在调查。由于成都天府新区软..._数字天空跳楼