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

debugcn 发表于 Dev

铝钾

我想要做的基本上是创建一个插件来生成名为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文件为我提供了一种样式：如图所示，在txt文件上显示：块。在此处输入图片说明

我发现了一个不理想的解决方法，该方法是在顶部添加下载功能，以便首先运行，但随后又不是我想要的，因为当我运行多个js文件时，它不起作用。

我也尝试过强制重新加载并立即下载，但是它不起作用。有没有一种将html文件预呈现为txt的方法，以便在单击下载按钮时可以获取所需的文本或将html内容设置为字符串？

我的样本：http：//jsfiddle.net/yomuffin89/fzg39sk5/8/

更新：我需要在主div内包含带有动画的脚本标签（我知道..但它的ie6），因此，如果代码按顺序生成，则它将获取该div内的所有内容。有没有一种方法可以将文件以txt格式运行，以便它仅将div内容作为文本获取，而没有任何后缀应用于文本？

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

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

brso05

您可以像这样获取内容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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

Perl获取Web内容，然后将其写为文本文件

如何合并pdf文件并将其下载为zip文件

使用R模仿“单击”文件以将其下载

Sweetalert-获取div内容并将其显示为文本

我如何获取链接内容（innerHTML）并将其作为标题添加到其他链接

如何使用纯Javascript从Div中的Span获取文本值

JavaScript-使用innerHTML作为实际的html而不是纯文本

从GoogleDrive获取文件而无需将其下载到存储设备-Python

如何将 EditText（纯文本）的内容保存到内部存储上的 Txt 文件中

将网址列表下载为scrapy，将其下载到文件名列表，并进行限速

从SFTP读取文件作为字节数组，而无需将其下载到文件C＃

如何从iCloud删除文件而不先将其下载到设备？

从txt文件中获取变量，然后使用BATCH将其运行到循环中

如何使用python解析压缩的站点地图而不将其下载到磁盘？

如何找到文件上的时间戳，然后将其作为第一行回显到文件的内容中？

如何通过使用纯JavaScript在其下方的事件对象获取上述元素

如何使用Xpath获取纯文本

如何使用Xpath获取纯文本

wget如何下载使用php作为纯html的网页？

wget如何下载使用php作为纯html的网页？

如何选择随机行，然后将其删除为.txt？

获取innerHTML值-仅纯文本

如何读取包含深度值的“.txt”文件，然后使用 MATLAB 将其转换为图像？

如何使用正则表达式查找并替换 txt 文件中行首的 (.) 然后将其删除？

如何使用Objective-C从纯文本远程文件中读取内容

Powershell 5.1解析json以获取特定键，并将其值作为行分隔文本写入新的.txt文件中

如何使用AES为相同的纯文本获取不同的密文

如何将纯文本响应编码为 JSON 并使用 PHP CURL 获取特定数据

如何获取文本文件的内容并将其复制到剪贴板？