Generating a file with multiple lines and initiating the download using the Chrome.downloads.download function

On my client side, I am creating some content and trying to download it using chrome.downloads.download. However, when the file is downloaded, the new lines are missing. I am adding new lines in the code snippet below:

lineContent += '\r\n';

I have also tried using '\r' or '\n', but none of these options seem to work. The document generated contains everything except for the new line characters. Any suggestions on why this might be happening?

I have verified that the issue is not related to the text editor, as I have tested with different editors.

// While debugging, the fileData appears to be multi-lined,
// but after downloading, the content becomes a single line.
chrome.downloads.download({
            url: "data:text/plain," + fileData,
            filename: 'file.txt',
            conflictAction: "prompt",
            saveAs: true,
            }, function(downloadId) {
                console.log("Downloaded item with ID", downloadId);
        });

Answer №1

Remember to use %0A (the url encoded entity of \n) to maintain line breaks when downloading files. You can either insert it directly or apply encodeURIComponent() on your text to encode the necessary characters.

function download1(){
  a = document.createElement("a")
  a.href = "data:text/plain,Stackoverflow%0ANewline";
  a.download = "test.txt";
  a.click();
}

function download2(){
  a = document.createElement("a")
  a.href = "data:text/plain,"+encodeURIComponent("Stackoverflow\nNewline");
  a.download = "test.txt";
  a.click();
}
<button onclick="download1()">Download 1</button>
<button onclick="download2()">Download 2</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

I've successfully set up my angular datatable configuration. Here's what it looks like: vm.dtOptions = DTOptionsBuilder.newOptions(). withPaginationType('full_numbers'). //withOption('ajax', { ...

Start by declaring a scope variable using AngularJS

My go-to method for retrieving data from the server and displaying it on various components like tables or charts is by using ng-init="controllerFunction()". This function needs to be called every time the page loads. While ng-init gets the job done, I ca ...

Developing Functions using MongoDB Console

When running the query db.graduates.find({student_id: '2010-01016'}).pretty(), it returns a result. Afterwards, I created a function: function findStud(name,value){ return db.graduates.find({name:value}); } However, while executing findStud("s ...

Encountering a CORS issue when attempting to establish a connection with S3 from a Rails application utilizing TextureLoader

I've been struggling with this issue for a while now. Despite searching on various search engines, I haven't made much progress. I have a script that loads a texture onto a sphere. var loader = new THREE.TextureLoader(); //allow cross origin ...

I'm struggling with developing react applications due to problems with canvas elements

I am currently using an M1 MacBook Pro, with Node version 15.4.1 and npm version 7.0.15. When I ran the command npx create-react-app my-app, it gave me this output: https://i.sstatic.net/OKKnA.jpg I have attempted various solutions but keep encountering ...

Data can be retrieved in a React/Next.js application when a button is clicked, even if the button is located in a separate

Whenever the button is clicked, my function fetches weather data for the current location. I am trying to figure out how to transfer this data from the Location component to the pages/index.tsx. This is where another component will display the data. This ...

Relaunch node.js in pm2 after a crash

Based on this post, it seems that pm2 is supposed to automatically restart crashed applications. However, when my application crashes, nothing happens and the process no longer appears in the pm2 list. Do I need to enable an 'auto restart' featu ...

Execute a VueJS API call every 20 minutes

I am retrieving data from an API endpoint to display information about coin names. I would like this information to update every 20 minutes, but for testing purposes, I have set it to refresh every 500 milliseconds. However, my current approach of fetching ...

Finding the position of a currently selected div by utilizing their data attributes

I am seeking to determine the index of an active div based on its data attributes. Currently, my approach involves obtaining the index on a sorted table. However, this method is ineffective in the case of an unsorted table: var count = $(".active").index ...

Navigating to a precise location on a webpage with React.js

I want to implement a straightforward action where the page automatically scrolls to a specific position upon loading. However, my attempts to execute this action have been unsuccessful so far. Is there an alternative method to achieve this in a React ap ...

What could be causing my Bootstrap accordion to malfunction?

Currently, I am in the process of constructing a website using Bootstrap 4. I have incorporated 3 individual <div> elements, each containing an accordion. These <div> sections are assigned their own unique id to facilitate the showing and hidin ...

Error: Unable to access the 'thumbnail' property because it is undefined

I have encountered a situation where I am able to access all properties except for one. I am struggling to identify what the issue might be. Here are some approaches I have tried: this.props.data.imageLinks.thumbnail this.props.data.imageLinks[thumbnail ...

Contrasting behavior in JavaScript experienced in development versus production environments

I've been working on an application that, when given certain data, generates a diagram using JavaScript in conjunction with the kineticJS framework. During development, everything is smooth sailing, but once deployed to production (Heroku), things st ...

Unlocking Node.js packages within React JS is a seamless process

Currently, I am developing a React Serverless App with AWS. I am looking for ways to incorporate a Node JS specific package into the React JS code without requiring Node JS on the backend. One package that I need access to is font-list, which enables list ...

AngularJS UI Router: Best Practices for Including the Controller Script

I have created a basic AngularJS single page application that uses UI Router to navigate between two views. When the user clicks on the Home link, they should see a line of text. Similarly, clicking on the About link should display some text as well, but i ...

What is the threading model utilized by node.js?

Upon establishing a connection with a server operating on node.js, how is the connection handled? Is it one connection per process? Does it follow a connection per thread model? Or does it operate based on request per thread? Alternatively, does it use ...

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

The partial template is not functioning as anticipated

Introducing an interface designed to accept two templates, with the resulting function being a partial of one of them (similar to React-Redux): export type IState<TState, TOwnProps> = { connect: (mapStateToProps: MapStateToProps<TState, Parti ...

Using Leaflet to make geojson XMLHttpRequests

Recently, I've been exploring the world of JavaScript and attempting to map around 2,200 data points in Leaflet. Despite following a helpful tutorial on pulling data from a geojson file and displaying it on a map, I can't seem to make it work wit ...

Managing JWT tokens for secured pages using Sails.js

In an effort to enhance security in my system, I decided to implement JWT token authentication. For the front-end, I opted for statellizer. Once a user logs into the system, a token is generated like this: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI ...