生成并下载网页的屏幕截图，而不会丢失样式 [英] Generate and Download Screenshot of webpage without lossing the styles
本文介绍了生成并下载网页的屏幕截图，而不会丢失样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在不损失样式的情况下生成并下载网页的屏幕截图。我有一个网页。在那个网页上我有一个下载按钮。当用户点击下载按钮时，整个页面的屏幕截图需要在用户计算机中下载为图像。
Index.html 请检查我的代码
< html>
< body>
< link href =style.css =stylesheet>
< h1> Scrrenshot< / h1>
< form class =cf>
< div class =half left cf>
< input type =textid =input-nameplaceholder =Name>
< input type =emailid =input-emailplaceholder =Email address>
< input type =textid =input-subjectplaceholder =Subject>
< / div>
< div class =half right cf>
< textarea name =messagetype =textid =input-messageplaceholder =Message>< / textarea>
< / div>
< input type =submitvalue =Submitid =input-submit>
< / form>
< / body>
< script>
（function（exports）{
function urlsToAbsolute（nodeList）{
if（！nodeList.length）{
return [];
}
var attrName = '的href';
如果（节点列表[0] .__ proto__ === HTMLImageElement.prototype
||节点列表[0] .__ proto__ === HTMLScriptElement.prototype）{
attrName = 'src';
}
nodeList = [] .map.call（nodeList，function（el，i）{
var attr = el.getAttribute（attrName）;
if （！attr）{
return;
}
var absURL = /^(https?|data):/i.test(attr）;
if（absURL）{
return el;
} else {
return el;
}
}）;
return nodeList;
}
function screenshotPage（）{
urlsToAbsolute（document.images）;
urlsToAbsolute（document.querySelectorAll（link [rel =样式表]））;
var screenshot = document.documentElement.cloneNode（true）;
var b = document.createElement（'base'）;
b.href = document.location.protocol +'//'+ location.host;
var head = screenshot.querySelector（'head'）;
head.insertBefore（b，head.firstChild）;
screenshot.style.pointerEvents ='none';
screenshot.style.overflow ='隐藏';
screenshot.style.webkitUserSelect ='none';
screenshot.style.mozUserSelect ='none';
screenshot.style.msUserSelect ='none';
screenshot.style.oUserSelect ='none';
screenshot.style.userSelect ='none';
screenshot.dataset.scrollX = window.scrollX;
screenshot.dataset.scrollY = window.scrollY;
var script = document.createElement（'script'）;
script.textContent ='（'+ addOnPageLoad_.toString（）+'）（）;';
screenshot.querySelector（'body'）。appendChild（script）;
var blob = new Blob（[screenshot.outerHTML]，{
type：'text / html'
}）;
返回blob;
}
功能addOnPageLoad_（）{
window.addEventListener（ 'DOMContentLoaded'，函数（E）{
变种scrollX = document.documentElement.dataset.scrollX | | 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo（scrollX，scrollY）;
}）;
}
function generate（）{
window.URL = window.URL || window.webkitURL;
window.open（window.URL.createObjectURL（screenshotPage（）））;
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
}）（window）;
< / script>
< / html>
style.css
@importcompass / css3;
@import url（https://fonts.googleapis.com/css?family=Merriweather）;
$ red：＃e74c3c;
$ b $，
*：之前，
*：在{
之后@include box-sizing（border-box）;
}
html，body {
background：＃f1f1f1;
font-family：'Merriweather'，sans-serif;
填充：1em;
}
h1 {
text-align：center;
颜色：＃a8a8a8;
@include text-shadow（1px 1px 0 rgba（white，1））;
}
表格{
border：2px纯蓝色;
margin：20px auto;
max-width：600px;
padding：5px;
text-align：center;
}
输入，textarea {
border：0;概要：0;
填充：1em;
@include border-radius（8px）;
display：block;
宽度：100％;
margin-top：1em;
font-family：'Merriweather'，sans-serif;
@include box-shadow（0 1px 1px rgba（black，0.1））;
resize：none;
&：focus {
@include box-shadow（0 0px 2px rgba（$ red，1）！important）;
}
}
＃input-submit {
color：white;
背景：$ red;
光标：指针;
&：hover {
@include box-shadow（0 1px 1px 1px rgba（#aaa，0.6））;
}
}
textarea {
height：126px;
}
}
.half {
float：left;
宽度：48％;
margin-bottom：1em;
}
.right {width：50％; }
.left {
margin-right：2％;
}
@media（max-width：480px）{
.half {
width：100％;
float：none;
margin-bottom：0;
}
}
/ * Clearfix * /
.cf：before，
.cf：after {
content ：; / * 1 * /
display：table; / * 2 * /
}
.cf：after {
clear：both;
}
.half.left.cf>输入{
margin：5px;
}
为此，我使用了方法[ http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5 -js /] ，这里的截图是生成的，但没有样式也不下载。请帮忙，是否有任何jQuery库可用于此？
解决方案
您可以使用以下JavaScript库实现此目标...