javascript - How to add line break in downloaded text file using js - Stack Overflow

admin管理员组

文章数量:1288024

I am trying to download inside div content in text format.

I can able to download inside div content in txt format but all the contents are same line .

I need to add the line break in each element.

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

<script src=".1.1/jquery.min.js"></script>
<div id="show-data">
<p>one</p>
<p>two</p>
<p>Three</p>
</div>
<button onClick="download()">Download</button>

I am trying to download inside div content in text format.

I can able to download inside div content in txt format but all the contents are same line .

I need to add the line break in each element.

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-data">
<p>one</p>
<p>two</p>
<p>Three</p>
</div>
<button onClick="download()">Download</button>

https://jsfiddle/1L2vmdhu/

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 27, 2017 at 7:45 SilverSurfer 4,36566 gold badges2626 silver badges5555 bronze badges asked Oct 27, 2017 at 6:57 Gobinath MGobinath M 2,02166 gold badges2929 silver badges4747 bronze badges 3

• didn't get it, Its having line breaks – Venkatesh Konatham Commented Oct 27, 2017 at 7:03
• @VenkateshKonatham Update the questions – Gobinath M Commented Oct 27, 2017 at 7:06
• please check my answer below – Venkatesh Konatham Commented Oct 27, 2017 at 7:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

please try with below example, as you are passing data in the form of url you have to encode new line characters which will make it work and another thing is you are trying to download as text so change content type to "text/plain"

 function download() {
        var a = document.body.appendChild(
            document.createElement("a")
        );
        var textToWrite = document.getElementById("show-data").innerText;
        a.download = "export.txt"; 
        textToWrite = textToWrite.replace(/\n/g, "%0D%0A"); 
        a.href = "data:text/plain," + textToWrite;
        a.click();
    }

  <div id="show-data">
<p>one</p>
<p>two</p>
<p>Three</p>
</div>
    <button onClick="download()">Download</button>

EDIT.

You can add \r\n to the end of all lines and the use the encodeURIComponent on the text output before outputting it to the text file. I added it here.

https://jsfiddle/1L2vmdhu/11/

I changed the javascript like this to make it work.

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

    var list = document.getElementsByTagName("p");
    var b = "";
    for (var i = 0; i < list.length; i++) {
        console.log(list[i].innerHTML);
        b += list[i].innerHTML + "\r\n";
    }
    b = encodeURIComponent(b);
    a.href = "data:text/html," + b;
    a.click();
}

本文标签： javascriptHow to add line break in downloaded text file using jsStack Overflow