使用 javascript 保存 div 内容的 HTML 按钮答案

【问题标题】：HTML button to save div content using javascript使用 javascript 保存 div 内容的 HTML 按钮
【发布时间】：2015-06-24 12:21:14
【问题描述】：

我需要使用纯 javascript 保存 div 的内容。我刚刚编辑了一个小提琴，但我无法使它工作:(

jsfiddle

<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>

下载

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + document.getElementById("content");
}

【问题讨论】：

标签： javascript html file button save

【解决方案1】：

在您的 jsfiddle 中，Java 脚本被配置为 onLoad，这就是没有调用 download() 的原因。把它改成No-Wrap，然后你就可以在按钮的onClick上调用download()了。

将下载（）更新为

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();

}

【讨论】：

【解决方案2】：

~~在 jsfiddle 中，除非 javascript 包含在标签中，否则您不能在 html 事件（如 onClick）中运行 javascript 函数。~~（没关系）

试试这个：

HTML

<div id="content">
    <h1>Hello world</h1>
    <i>Hi everybody</i>
</div>
<button id="download">Download</button>

var download_button = document.getElementById('download');
download_button.onclick = download;

function download(){
    var content = document.getElementById('content')
    console.log(content);
}

updated jsfiddle

【讨论】：

奇怪，每次我在 jsfiddle 上尝试时，它都无法识别函数
有时 jfiddle 会错误地呈现输出。尝试创建一个新的 jfiddle 并粘贴代码试试。

【解决方案3】：

我同意 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>

【讨论】：

【解决方案4】：

关闭，您还需要 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
}

Working Fiddle

【讨论】：

效果很好！非常感谢您的帮助！ :) 我可以在数据中添加字符集吗？
没问题，在 text/html 位之后添加;charset=
@Cutter 对于 IE，您应该查看 window.navigator.msSaveBlob。对于 Safari，您可能需要让用户手动单击元素