使用 javascript 保存 div 内容的 HTML 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29702758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML button to save div content using javascript
提问by nosmoke
I need to save content of div using pure javascript. I just edited one fiddle but I can't make it works :(
我需要使用纯 javascript 保存 div 的内容。我刚刚编辑了一个小提琴，但我无法让它工作:(
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
Download
下载
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content");
}
回答by CodingIntrigue
Close, you need innerHTML & trigger the click too:
关闭，您还需要 innerHTML 并触发点击：
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
a.click(); // Trigger a click on the element
}
回答by Pranav Manmadhan
In your jsfiddle Java Script is configured to onLoad, which is why download()is not being invoked. Change it to No-Wrap, then you will be able invoke download()on onClickof the button.
在您的 jsfiddle Java Script 配置为onLoad，这就是未调用download() 的原因。将其更改为No-Wrap，然后您就可以在onClick按钮上调用download()。
update download() as
将下载（）更新为
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML;
a.click();
}回答by Faraj Farook
I agree with RGraham. However, if you use jQueryyou can do it like this.
我同意 RGraham 的观点。但是，如果您使用，jQuery您可以这样做。
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button class="download">Download</button>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$('.download').on('click', function(){
$('<a />').attr({
download: 'export.html',
href: "data:text/html," + $('#content').html()
})[0].click()
});
</script>
回答by Walker Boh
In jsfiddle, you can't run a javascript function inside of html events (like onClick) unless the javascript is contained in tags.(nevermind this)
在 jsfiddle 中，除非 javascript 包含在标签中，否则您无法在 html 事件（如 onClick）内运行 javascript 函数。（别管这个）
Try this:
试试这个：
HTML
HTML
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button id="download">Download</button>
JS
JS
var download_button = document.getElementById('download');
download_button.onclick = download;
function download(){
var content = document.getElementById('content')
console.log(content);
}
