我的问题是,如何保存div,以便可以通过电子邮件将其发送给某人。如果不可能的话,我怎么不能下载整个页面,而只能下载一个div。我在div的左侧创建了一个小图像,在右侧创建了一个单词。我想用它来通过单击按钮向人们发送电子邮件,或者单击按钮来下载此div。我放置了一张图片作为我要发送的div的示例。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#photo')
.attr('src', e.target.result)
.addClass("photo")
;
};
reader.readAsDataURL(input.files[0]);
}
}
var recipientVal = document.getElementById('recipientValue');
var senderVal = document.getElementById('senderValue')
var commentVal = document.getElementById('commentValue');
var recipient = document.getElementById('recipient');
var sender = document.getElementById('sender');
var comment = document.getElementById('comment');
function info(){
recipient.innerHTML = recipientVal.value;
sender.innerHTML = senderVal.value;
comment.innerHTML = commentVal.value;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#image-wrapper{
background-image:url(https://assets3.thrillist.com/v1/image/2279641/size/sk-2017_04_article_main_mobile.jpg);
background-position: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#right-portion{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<meta charset=utf-8 />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<title>JS Bin</title>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<div class='col-xs-12 text-center mt-4 mb-4'>
Recipient name: <input id="recipientValue" type="text" name="recipient" value="" minlength="5">
Sender name: <input id="senderValue" type="text" name="sender" value="" minlength="5">
Background: <select name="background">
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
<option value="winter">Winter</option>
</select>
<br>
<textarea id='commentValue' class="text-center w-75 mt-4" id="subject" name="comment" value='' maxlength="255" placeholder="Write something.." style=""></textarea>
<br>
<input type="submit" onclick='info()' value="Submit">
</div>
<div id="image-wrapper" class="container-fluid">
<div class ="row">
<img id="photo" class="col-sm-6" src="#" alt="your image" />
<div id="right-portion" class="col-xl-6">
<h1 id="recipient"> Recipient name: </h1>
<p id="comment">I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. Christmas is coming. Rock music approaches at high velocity. Writing a list of random sentences is harder than I initially thought it would be. A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt. A song can make or ruin a person’s day if they let it get to them. The lake is a long way from here. I was very proud of my nickname throughout high school but today- I couldn’t be any different to what my nickname was. I think I will buy the red car, or I will lease the blue one. When I was little I had a car door slammed shut on my hand. I still remember it quite vividly. Lets all be unique together until we realise we are all the same. We have never been to Asia, nor have we visited Africa. He ran out of money, so he had to stop playing poker.I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. I will never be this young again. Ever. Oh damn… I just got older. A glittering gem is not enough. The waves were crashing on the shore; it was a lovely sight. </p>
<h2 id='sender'>From: your name</h2>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>