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

Question

我需要使用纯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");
}

Answer 1

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

工作小提琴

Answer 2

在您的 jsfiddle Java 脚本中配置为 onLoad，这就是为什么 download() 没有被调用。将其更改为 No-Wrap，然后您就可以在按钮的 onClick 上调用 download()。

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

}

Answer 3

我同意格雷厄姆的观点。但是，如果您使用

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>

Answer 4

在 jsfiddle 中，除非 javascript 包含在标签中，否则您无法在 html 事件（如 onClick）中运行 javascript 函数。（不用管这个）

试试这个：

HTML

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

JS

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

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

更新了jsfiddle

Answer 5

您可以使用“SaveFilePicker”直接保存到您选择的文件夹，而不会触发先前方法的更严格的下载机制。您可以保存任何类型的项目。

<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button onmousedown="saveAs()" class="saveAs">saveAs</button>
<script>
async function saveAs(){
fileHandler = await window.showSaveFilePicker();
const file = await fileHandler.createWritable();
await file.write(document.querySelector('#content').innerHTML);
await file.close();
}
</script>

这是一个工作的www.w3schools.com：https://leseditionslyriques.w3spaces.com/Save-Div-Content-On-Your-Computer.html