如何使用innerHTML作为纯文本获取div内容，然后将其下载为txt文件？

Question

我尝试做的基本上是创建一个插件来生成一个名为main的div内容的innerHTML，并将其下载为文本文件。但是，在运行所有js / jquery函数之后，我不想获得后期渲染的html。我设法做到了这一点，但问题在于它会产生一切。

HTML：

<button id= "clickhere">CLICK HERE</button>
<div id="main">
    <p id="yeah" class="hide">asdasdadadad</p>

    <span>Hey there</span>
</div>

CSS：

.hide{
    display: none;
}

JS：

$('#clickhere').click(function(){
    //location.reload();
    downloadeverything();
});


function downloadeverything(){

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 =  'testing.txt';
downloadInnerHtml(fileName, 'main','text/html');
}

    $('#yeah').show('puff', 750);

显然我的项目更大但是我创建了一个示例小提示来显示问题。基本上当我添加fadeIn或puff Jquery动画时，生成的txt文件给我一个样式：display：block on txt file，如图所示。

我找到了一个非理想的解决方法，即在顶部添加下载功能，使其首先运行，然后再次运行，这不是我想要的，因为当我有超过1时，它不起作用js文件正在运行。

我还试图强制重装并立即下载，但它不起作用。有没有办法将html文件预渲染为txt，这样我可以获得我想要的文本，或者在点击下载按钮时将html内容设置为字符串？

我的示例：http://jsfiddle.net/yomuffin89/fzg39sk5/8/

更新：我需要在主div中包含带动画的脚本标签（我知道..但是它的ie6）所以如果代码按顺序生成，那么它将获得该div中的所有内容。有没有办法将文件作为txt运行，所以它只是将div内容作为文本而没有任何应用于它的文字？

更新小提琴：http://jsfiddle.net/yomuffin89/fzg39sk5/13/

如果有人可以提供帮助，我将不胜感激。

Answer 1

您可以像这样获取内容onPageLoad事件：

var elHtml;

$('#clickhere').click(function(){
location.reload();
downloadeverything();

});


function downloadeverything(){

function downloadInnerHtml(filename, elId, mimeType) {
    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 =  'testing.txt';
downloadInnerHtml(fileName, 'main','text/html');
}

$(document).ready(function(){
elHtml = document.getElementById('main').innerHTML;
$('#yeah').show('puff', 750);
});

Answer 2

您可以获取目标div的初始内容并将它们保存在同一div的数据属性中。然后单击，您可以从那里检索内容：

$('#main').each(function() {
    $(this).data('contents', $(this).html());
});

DEMO