【发布时间】：2015-11-13 14:56:33
【问题描述】：
我正在构建一个 webapp，最终目的是将所有内容导入到 pdf 文件中，它实际上运行良好，但有一个问题我不明白为什么会发生：每当我切换图标的位置以将 pdf 保存到生成的 pdf 的底部返回半黑色，如下所示：
http://postimg.org/image/i82vu96qv/
JSPDF部分就在开头：
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
}
body {
background-color: #fff;
font-family:'Montserrat', verdana,sans-serif;
margin: 0 !important;
padding: 0 !important;
}
html { overflow-y: scroll; }
a:link {
text-decoration:none;
color:black;
color:#e63e4d;
}
a:visited {
text-decoration:none;
color:black;
color:#e63e4d;
}
h1 {
font-size: 25px;
font-weight: 200;
margin-top: 5px;
}
h2 {
font-size: 20px;
font-weight: 200;
margin-top: 5px;
}
h3 {
font-size: 15px;
font-weight: 200;
margin: 0;
margin-left: 15px;
}
h4 {
font-size: 15px;
font-weight: 300;
margin: 0;
margin-left: 12px;
}
#loading {
width: 100%;
height: 100%;
position: fixed;
display: none;
z-index:9999999999;
top:0;
margin: 0 auto;
opacity: 0.9;
background-color: white;
}
.imgload {
position:relative;
margin: 0 auto;
margin-top: 15%;
text-align:center;
}
#img_logo{
height: 68px;
width: 256px;
float:right;
padding-right:14px;
right: 15px;
}
.img_logo_temp{
margin-top:-16px;
}
#container{
width: 1024px;
height: 100%;
background-color: #fff;
position:relative;
margin: 0 auto;
overflow: hidden;
}
.spacer {
width: 100%;
clear:both;
height: 25px;
}
.bottomsession {
overflow: auto;
}
#pdfhtml{
}
.textquestions{
width: 100%;
height: 130px;
}
.textquestions1{
width: 95%;
float:left;
height: 110px;
}
.openquestion_temp{
display:none !important;
}
.openquestion{
margin-bottom:30px;
width: 45%;
margin-right: 30px;
margin-left:15px;
float:left;
}
.session_line{
margin-top: 10px;
}
.postit:hover{
opacity: 70%;
}
.post_own_input{
width: 80%;
text-align:center;
border: none;
background-color: transparent;
text-decoration: bold;
font-size: 12pt;
padding-left:4px;
}
input[type="text"] {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
}
.page_btn{
margin-left:30px;
width:50%;
clear:both;
float:right;
}
.page_icon_btn {
width: 40px;
height: 40px;
background: #e63e4d;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin-right: 5px;
text-align: center;
}
.page_icon_btn p {
color: white;
margin: 0 auto;
margin-top: -6px;
font-weight: 1000;
font-size: 45px;
}
.postnotes ul {
list-style: none;
}
.ownpostnotes_div{
style="width: 100%;
clear:both;
}
.postnotes li{
list-style: none;
float: left;
margin-left: 10px;
margin-bottom: 10px;
}
.postnote {
width: 120px;
padding-top:40px;
height: 60px;
background-color: gold;
text-align:center;
cursor: pointer;
}
#top_wrapper {
width: 100%;
height:65px;
padding-left:14px;
top:0;
clear: both;
overflow: hidden;
background-color: #fff;
}
.top_wrapper_temp {
height:40px !important;
}
.showpdf{
display:none;
}
.nav_back {
width: 150px;
margin-left:10px;
margin-top: 12px;
float:left;
cursor: pointer;
}
.nav_back p {
margin-top: 12px;
}
.nav_back_btn {
width: 40px;
height: 40px;
cursor: pointer;
background: #e63e4d;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin-right: 5px;
}
.nav_back_btn p {
font-size: 20px;
color: white;
margin-left: 14px;
cursor: pointer;
margin-top: 9px;
font-weight: 900;
}
.page {
width: 1024px;
overflow: hidden;
display:block;
float:left;
}
#images{
padding-left:22px;
overflow:hiden;
width: 100%;
}
.output { color: #888; font-size: 26px; text-align:center; margin-right: 5px; vertical-align: top; margin-left: 48%; display:none;}
html { overflow-y: scroll; }
.slider { margin: 0 auto; }
hr {
display: block;
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
.dragger {
width: 36px !important;
height: 36px !important;
text-align: center;
line-height: 36px;
font-size: 19px;
font-color: white;
}
.dragger p{
color:white;
}
#situations {
list-style: none;
text-align: left;
-webkit-padding-start: 0px !important;
padding-left:0px;
-webkit-margin-start: 0px !important;
width: 100%;
margin: 0 auto;
}
#situations li {
display: inline-block;
list-style: none;
margin: 7px;
border: 4px solid white;
overflow:hidden;
z-index: 9999;
}
.situationimg {
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
.situationimg_click {
border: 4px solid #0098aa !important;
border-radius: 5px;
opacity: 1;
}
.content_page {
overflow: auto;
width: 100%;
float:left;
margin-top:-50px;
}
.content {
margin-left: 15px;
margin-right: 15px;
margin-top: 80px;
}
.left_content{
width: 48%;
height: 100%;
float:left;
}
.right_content{
width: 48%;
margin-left:29px;
height: 100%;
float:left;
}
.front_left{
width: 48%;
margin-right: 20px;
height: 100%;
padding-left: 15px;
float:left;
}
.front_right{
width: 48%;
height: 100%;
float:left;
}
.bottom_arrow{
right: 10px;
bottom: 25px;
position: absolute;
z-index:999;
}
.pdf_save{
cursor: pointer;
}
.pdf_save p{
margin-top: 10px
}
.nextpage_btn {
width: 90px;
height: 90px;
cursor: pointer;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
float: right;
margin-right: 20px;
}
.nextpage_btn p {
color: #ffffff;
text-align:center;
margin-top: 18px;
font-size: 50px;
}
.pdfpage_btn {
width: 60px;
height: 60px;
cursor: pointer;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
float: right;
margin-right: 30px;
}
.pdfpage_btn p {
color: white;
text-align:center;
margin-top: 18px;
font-size: 20px;
font-size: 20px;
}
#page_wrapper {
width: 100%;
overflow:hidden;
margin-bottom: 100px;
}
.session {
display:block;
float:left;
width:100%;
height:100%;
background-color: #fff;
overflow: hidden;
}
textarea {
display: block;
margin: 0;
width: 100%;
font-size: 16px;
appearance: none;
box-shadow: none;
border-radius: 4px;
padding: 8px;
border: solid 5px #c9c9c9;
transition: border 0.3s;
resize: none;
overflow: hidden;
}
textarea:focus {
outline: none;
border: solid 5px #969696;
}
.textfield_discrib {
width: 380px;
height: 185px;
float: left;
display: block;
margin-left: 10px;
margin-right: 10px;
}
.s_disrib {
width: 100%;
height: 100%;
float: left;
display: block;
overflow:hidden;
padding: 0.5em;
}
.charNum {
float: right;
font-size: 12px;
font-weight: 200;
color: grey;
margin-top: -20px;
margin-right: -18px;
}
.textfield_implement {
width: 380px;
height: 120px;
float: left;
display: block;
margin-left: 10px;
margin-right: 10px;
}
.s_implement {
width: 80%;
height: 100%;
float: left;
display: block;
padding: 0.5em;
}
.charNumStra {
float: right;
font-size: 12px;
font-weight: 200;
color: grey;
margin-top: -20px;
margin-right: -18px;
}
.modal_white {
width: 100%;
height: 100%;
position: fixed;
display: none;
z-index:9999999999;
top:0;
margin: 0 auto;
opacity: 0.9;
background-color: white;
}
#modal_intro{
position:absolute;
opacity: 1;
margin: 0 auto;
display: none;
width: 550px;
z-index: 99999999999;
padding: 15px;
top: 20%;
right: 237px;
height: 260px;
background-color: white;
border-radius: 15px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#begin_session{
cursor: pointer;
}
#begin_session p{
color: white;
}
.modal_strategy_situation{
position: absolute;
right: 10px;
max-width: 690px;
height: 97%;
top: 10px;
overflow:hiden;
display: none;
background-color: white;
border-radius: 15px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#modal_situations{
}
#modal_situations ul {
margin: 0 auto;
list-style: none;
text-align: left;
-webkit-padding-start: 0px;
}
#modal_situations li {
display: inline-block;
list-style: none;
border-radius: 15px;
overflow:hidden;
z-index: 9999;
margin: 12px;
}
#modal_strategies{
}
.modal_strategies {
margin: 0 auto;
list-style: none;
text-align: left;
-webkit-padding-start: 0px;
}
.modal_strategies li {
display: inline-block;
list-style: none;
border-radius: 15px;
overflow:hidden;
z-index: 9999;
margin: 12px;
}
#strategy-img {
border-radius: 15px;
overflow: hidden;
}
.modal_center{
position: absolute;
z-index: 9999999;
right: 5%;
top:5%;
bottom: 5%;
left: 5%;
background-color: white;
display: none;
border-radius: 15px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#modal_pdf{}
#modal_help{
right: 12% !important;
top:12% !important;
bottom: 12% !important;
left: 12% !important;
}
#modal_strategies_help{}
#help_strategies_describ {
margin: 0 auto;
list-style: none;
text-align: left;
-webkit-padding-start: 0px;
}
#help_strategies_describ li {
display: inline-block;
list-style: none;
border-radius: 15px;
overflow:hidden;
z-index: 9999;
margin: 12px;
}
.strategies_help_bind{
clear:both;
}
.strategies_column{
width: 31%;
float:left;
margin-bottom: 30px;
background-color:lightgrey;
margin-left:15px;
}
.strategies_column img{
width: 100%;
}
.strategies_column p{
margin-top:-5px;
margin-bottom: 10px;
}
.modal_content{
margin: 0 auto;
width: 99%;
height: 90%;
bottom: 0;
overflow-y: scroll;
overflow-x:none;
}
.modal_content p{
padding-left: 10px;
padding-right: 10px;
}
.hide {
right: -5px;
margin-top: -8px;
position: absolute;
z-index: 999;
cursor: pointer;
}
.showupload{
position: absolute;
z-index: 999;
right: 0px;
bottom: 0px;
}
.ranking {
width: 260px;
height: 200px;
float: left;
display: block;
margin-left: 20px;
margin-top: 20px;
}
.rating {
padding-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
}
.rate_circle {
width: 60px;
height: 60px;
background: grey;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
float: left;
opacity: 0.2;
margin-right: 22px;
}
.rate_circle_label {
width: 60px;
text-align: center;
float: left;
margin-right: 22px;
}
.rate_circle_chosen {
opacity: 1;
}
.yourimage {
min-width:299px;
min-height:199px;
max-width:350px;
}
.nav_page{
margin-right: 30px;
width: 155px;
margin-top: 12px;
float: left;
}
.nav_page p{
margin-top: 12px;
}
.nav_page a:visited {
color: black;
text-decoration: none;
}
.nav_btn {
width: 40px;
height: 40px;
background: #e63e4d;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
margin-right: 5px;
text-align: center;
}
.nav_btn p {
color: white;
margin: 0 auto;
margin-top: 10px;
font-weight: 900;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
border:4px solid #e8e8e8;
color: #ffffff;
cursor: pointer;
font-size: 26px;
background: grey;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #000;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Motivation Tools</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="./js/jspdf/jspdf.min.js"></script>
<script type="text/javascript" src="./js/jspdf/jspdf.js"></script>
<script type="text/javascript" src="./js/jspdf/debug.js"></script>
<script type="text/javascript" src="./js/jspdf/images.js"></script>
<script type="text/javascript" src="./js/jspdf/addimage.js"></script>
<script type="text/javascript" src="./js/jspdf/FileSaver.js"></script>
<script type="text/javascript" src="./js/jspdf/canvas.js"></script>
<script type="text/javascript" src="./js/jspdf/html2canvas.js"></script>
<script type="text/javascript" src="./js/jspdf/deflate.js"></script>
<script type="text/javascript" src="./js/jspdf/standard_fonts_metrics.js"></script>
<script type="text/javascript" src="./js/jspdf/split_text_to_size.js"></script>
<script type="text/javascript" src="./js/jspdf/blob.js"></script>
<script type="text/javascript" src="./js/jspdf/addhtml.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Include Simple Slider JavaScript and CSS -->
<script src="./js/simple-slider.js"></script>
<link href="./css/simple-slider.css" rel="stylesheet" type="text/css" />
<!-- Activate Simple Slider on your input -->
<script>
$(document).ready(function() {
$( ".situationimg" ).click(function() {
$( this ).toggleClass( "situationimg_click" );
});
});
$(document).ready(function(){
$('#reload_btn').click(function() {
if(confirm("Are you sure? All changes will be deleted"))
{
$("#loading").show();
location.reload(true);
$("#loading").hide();
}
else
{
if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
}
});
});
</script>
$(document).ready(function(){
$( "#pdfhtml, .pdf_save" ).click(function() {
$("#img_logo").attr("class","img_logo_temp");
$("#top_wrapper").attr("class","top_wrapper_temp");
$(".showpdf").show();
$(".ignorepdf").hide();
exportPDF();
});
function exportRevert() {
$(".ignorepdf").removeAttr('style');
$("#img_logo").removeAttr('class');
$("#top_wrapper").removeAttr('class');
$(".showpdf").hide();
}
function exportPDF() {
$("#loading").show();
var doc = new jsPDF('p','px','letter');
var options = {
pagesplit: true
};
doc.addHTML($('#container')[0], 5, 5, {
'background': '#fff',
'width': 1200,
}, function() {
$("#loading").hide();
if ( navigator.userAgent.indexOf('iPad') == -1 )
{
doc.save("LivingWellSession");
}
else {
doc.output('datauri');
}
$("#iframepdf").attr("src", doc.output('datauristring'));
$('#pdfdownloadlink').click(function () { doc.save('liwingWellsession.pdf');});
exportRevert();
});
}
});
</script>
<!--<![endif]-->
</head>
<body>
<div class="modal_white"></div>
<div id="loading">
<div class="imgload">
<h1>Creating the PDF</h1>
<img src="./img/loader.gif" style="width: 80px; height: 80px;">
</div>
</div>
<div id="container">
<div id="top_wrapper">
<img id="img_logo" src="./img/logo.jpg">
<h1 class="showpdf" style="width:50%;">Take Action on Your Hearing</h1>
<div id="nav_controls" Class="ignorepdf" >
<div class="nav_page">
<a href="#" id="reload_btn">
<div class="nav_save_btn nav_btn">
<p><i class="icon-refresh icon-large" ></i></p>
</div>
<p>Reset session</p>
</a>
</div>
<div class="nav_page">
<a href="#" class="pdf_save" >
<div class="nav_btn">
<p><i class="icon-file-text icon-large" ></i></p>
</div>
<p>Download</p>
</a>
</div>
</div>
</div>
<div id="page_wrapper">
<div class="page">
<div class="content_page">
<div class="content" style="margin-top: 75px !important;">
<h1 class="ignorepdf">Take Action on Your Hearing</h1>
<p>TThis activity is designed to help you think about how important it would be for you to improve your hearing in communication situations that you may find it difficult to hear in today. You can print out a copy and bring it to your first appointment, or email it to your audiologist before you meet.</p>
</div>
</div>
</div>
<div class="page">
<div class="content_page">
<div class="content">
<h2>Many people discover that they have a hearing loss because they have hearing difficulties in one or often more of the situations shown below.</h2>
Take a look at the photos. Have you experienced hearing difficulties in any of these situations? (Click to select)
</div>
</div>
</div>
<div class="session" id="session1">
<div id="images">
<ul id="situations">
<li id="strategy1" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/1_Communicating-in-noisy-environment.jpg"></li>
<li id="strategy2" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/2_Communicating-with-family.jpg"></li>
<li id="strategy3" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/3_Communicating-with-spouse.jpg"></li>
<li id="strategy4" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/11_woman_on_the_phone.jpg"></li>
<li id="strategy5" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/7_Communicating-in-meeting,professional-events.jpg"></li>
<li id="strategy6" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/8_Watching-a-movie-in-cinema.jpg"></li>
<li id="strategy7" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/9_Communicating-in-car.jpg"></li>
<li id="strategy8" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/10_Shopping.jpg"></li>
<li id="strategy8" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/12_man_with_child.jpg"></li>
</ul>
</div>
</div>
<hr class="session_line" style="display:none;">
<div class="page">
<div class="content_page" style="clear:both; margin-bottom:40px !important;">
<div class="content">
<div class="left_content">
<p> How important is it for you to improve your hearing in the selected situations? (Place the marker on the line)</p>
<div id="slidescale">
<input type="text" data-slider="true" value="5.4" data-slider-range="1,10" data-slider-step="0.1">
</div>
<div style="width:44%; float:left; padding-left:20px;">1</div>
<div style="width:48%; float:left; text-align: right; padding-right:15px;">10</div>
</div>
<div class="right_content">
What is your reason for putting the marker where you did?
<textarea placeholder="Please write your reasons here" id="text1" type="text" class="textquestions1"></textarea>
</div>
</div>
</div>
<div class="session" id="session2">
<div class="openquestion">
What will happen if you continue as you do today?
<textarea placeholder="Write here" id="text2" type="text" class="textquestions" style="margin-top:22px;"></textarea>
</div>
<div class="openquestion">
What would happen if you get a hearing aid and improve your hearing right now?
<textarea placeholder="Write here" id="text3" type="text" class="textquestions" style="margin-top:2px;"></textarea>
</div>
</div>
<div class="session" id="session2">
<div class="openquestion">
What will happen if you continue as you do today?
<textarea placeholder="Write here" id="text2" type="text" class="textquestions" style="margin-top:22px;"></textarea>
<a href="#" class="pdf_save" >
</div>
</div>
<div class="session ignorepdf" id="session3">
<h2 style="padding-left:14px;">Hear their stories</h2>
<div style="padding-left:14px; width:49%; float:left; margin-right: 6px;">
<iframe src="https://player.vimeo.com/video/128467673" width="95%" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div style=" width:49%; float:left;"><iframe src="https://player.vimeo.com/video/138837087" width="95%" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div id="container">
<div id="top_wrapper">
</div>
</div>
</div>
</div>
<div class="nav_page">
<a href="#" class="pdf_save" >
<div class="nav_btn">
<p><i class="icon-file-text icon-large" ></i></p>
</div>
<p>Download</p>
</a>
</div>
<script>
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output")
.html(data.value.toFixed(0));
$(this).parents().find(".dragger").append("<p></p>").html(data.value.toFixed(0));
});
</script>
</body></html>【问题讨论】：