如何使用格式化将html内容解析为文本文件?

时间:2016-01-14 09:11:44

标签: javascript html export

我有一个应用程序,用户可以使用ajax调用执行某些操作。当ajax调用完成后,操作的结果将附加到id = "log"的div中。我想在完成他的工作时创建一个用户选项(按钮 - 导出),他可以将他的“活动日志”导出到.txt文件中。到目前为止,我已经成功做到这一点,但html转换为带有标签的txt文件等。我想删除标签并格式化.txt文件,但不知道如何。

我的HTML代码是

<input type="button" value="Export" onclick="exportLog();">
<div id="log">
    <p>Action 1 successful</p>
    <p>Action 2 unsuccessful </p>
    <p>Action 4 - contact admin</p>
    <p>...etc</p>
</div> 

Javascript代码

function exportLog(){
    var elHtml = document.getElementById('log').innerHTML;
    var link = document.createElement('a');
    var mimeType = 'text/plain';

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

我是在this的帮助下完成的。它有效,但我的.txt文件就像

<p>Action 1 successful</p><p>Action 2 unsuccessful </p><p>Action 4 - contact admin</p><p>...etc</p>

我希望看起来像

Action 1 successful
Action 2 unsuccessful 
Action 4 - contact admin
...etc

如何实现这一目标?

2 个答案:

答案 0 :(得分:2)

第一种方法:innerHTML更改为innerText

您的工作code

我只改变了这一行

var elHtml = document.getElementById('log').innerText;

第二种方法:

您可以使用textContent API

JsFiddler link

PS:我能够使用两种方法获取换行符的文本

请参阅我的文本编辑器的屏幕截图供您参考。

enter image description here

答案 1 :(得分:1)

好的,如果只使用p标签,那么这应该有效

var stringWithNewLines = logContent.replace(/<p>(.+?)<\/p>/g, function(str, p1, offset, s) {
      return p1 + "\n"; 
});