如何将div中的源内容导出到text/html文件

Question

假设我已经<div id="main"> ... Some html ...</div>和我需要在这个div中使用html代码,将其放在一个文件中并强制以TXT格式下载它.怎么办？我应该使用PHP还是Javascript？我宁愿javascript.

Answer 1

你可以使用这样的东西:

更新了jsfiddle与下载btn(jquery)

初始jsfiddle与普通js和自动执行

HTML

<div id="main">
    <span>Hey there</span>
</div>

html - 编辑(添加了执行此操作的链接)

<a href="#" id="downloadLink">Download the inner html</a>

JS

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'tags.html'; // You can use the .txt extension if you want

JS - 编辑

既然你在评论中说你正在使用jQuery我会从处理程序中调用这个函数,而不是直接调用它.

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'main','text/html');
});

您可以下载文本,只删除函数的第三个参数,它将采用默认的"text/plain",并将扩展名.txt添加到文件名而不是html.

注意 我编辑了这个答案,因为那个问过评论他正在寻找如何让它与处理程序一起工作的人,他让它成功了,但以防万一.原始代码在jsfiddle中