divコンテンツをtxtファイルにダウンロードしました

Question

divファイルの内容をtxtファイルにダウンロードしようとしています。

私が試したときには、すべてのタグを含む書式なしのテキストも取得しています。助けてください！私はこれがTxt Fileようで印刷したい

HTML

<div id="theVals"> 
    <p class="theRecord">Entry: John Smith<br /> 
    First Name: John<br /> 
    Last Name: Smith<br /> 
    homephone: <span class="homephone">123-456-7890</span><br /> 
    email: johnsmith@xyz.com<br /> 
    uid: <span class="uid">JS</span><br /><br /></p> 

    <p class="theRecord">Entry: Claire Peppers<br /> 
    First Name: Claire<br /> 
    Last Name: Peppers<br /> 
    homephone: <span class="homephone">123-456-7890</span><br /> 
    email: clairepeppers@xyz.com<br /> 
    uid: <span class="uid">CP</span><br /><br /></p> 
</div> 

<button onClick="download()">Download</button> 

Javascriptを

function download() { 
    var a = document.body.appendChild(
     document.createElement("a") 
    ); 

    a.download = "export.txt"; 
    a.href = "data:text/html," + document.getElementById("theVals").innerHTML; 
    a.click(); 
} 

。

Answer 1

これがうまくいくはずです。document.getElementById("theVals").innerHTMLをdocument.getElementById("theVals").innerTextに変更しました。これにより、HTMLをレンダリングしてからダウンロードすることができます。

アカウントで <br />を取るために

function downloadFile() { 
 
    var a = document.createElement("a"); 
 
    a.download = "export.txt"; 
 
    a.href = "data:text/html," + document.getElementById("theVals").innerText; 
 
    document.body.appendChild(a); 
 
    a.click(); 
 
}

<div id="theVals"> 
 
    <p class="theRecord">Entry: John Smith<br /> 
 
    First Name: John<br /> 
 
    Last Name: Smith<br /> 
 
    homephone: <span class="homephone">123-456-7890</span><br /> 
 
    email: johnsmith@cyberforza.com<br /> 
 
    uid: <span class="uid">JS</span><br /><br /></p> 
 

 
    <p class="theRecord">Entry: Claire Peppers<br /> 
 
    First Name: Claire<br /> 
 
    Last Name: Peppers<br /> 
 
    homephone: <span class="homephone">123-456-7890</span><br /> 
 
    email: clairepeppers@cyberforza.com<br /> 
 
    uid: <span class="uid">CP</span><br /><br /></p> 
 
</div> 
 

 
<button onclick="downloadFile()"> 
 
Download 
 
</button>

Answer 2

...
あなたがHTMLを維持考慮する必要があります。

したがって、<br />をすべて「改行」文字で置き換えます。
他のすべてのタグを削除します。

Regular Expressionsについて読んで、あなたのテストをhereにすることを強くお勧めします。

function download() { 
 
    var a = document.body.appendChild(
 
    document.createElement("a") 
 
); 
 

 
    a.download = "export.txt"; 
 

 
    var HTML = document.getElementById("theVals").innerHTML; 
 
    
 
    // Replace the <br> by \r\n 
 
    HTML = HTML.replace(/<br\s?\/?>/g,"\r\n"); 
 
    
 
    // Remove tags having ONE attribute 
 
    HTML = HTML.replace(/<.+\s.+".+">/g,""); 
 
    
 
    // Remove all other tags 
 
    HTML = HTML.replace(/<.+>/g,""); 
 

 
    a.href = "data:text/html," + HTML; 
 
    a.click(); 
 
}

<div id="theVals"> 
 
    <p class="theRecord">Entry: John Smith<br /> 
 
    First Name: John<br /> 
 
    Last Name: Smith<br /> 
 
    homephone: <span class="homephone">123-456-7890</span><br /> 
 
    email: johnsmith@cyberforza.com<br /> 
 
    uid: <span class="uid">JS</span><br /><br /></p> 
 

 
    <p class="theRecord">Entry: Claire Peppers<br /> 
 
    First Name: Claire<br /> 
 
    Last Name: Peppers<br /> 
 
    homephone: <span class="homephone">123-456-7890</span><br /> 
 
    email: clairepeppers@cyberforza.com<br /> 
 
    uid: <span class="uid">CP</span><br /><br /></p> 
 
</div> 
 

 
<button onClick="download()">Download</button>