Issue encountered while trying to download JSON file

Question

Issue encountered while trying to download JSON file

I have been attempting to download JSON data into a JSON file using the code snippet below, but all it does is present me with a blank page in Internet Explorer. I am in search of a solution to download the JSON file without triggering any events on the user interface.

var dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(JSONData));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataUri);
downloadAnchorNode.setAttribute("download", "CarData.json");
downloadAnchorNode.click();

javascript json

Answer 1

Answer №1

If you are experiencing a blank page, it may be because you forgot to insert the anchor node into the DOM. Take a look at the code snippet below. Even without the download attribute, the page will display JSON data.

var JSONData = {
  foo: "bar"
};

var dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(JSONData));
var downloadAnchorNode = document.createElement('a');

downloadAnchorNode.innerHTML = "Click";
downloadAnchorNode.setAttribute("href", dataUri);
downloadAnchorNode.setAttribute("download", "CarData.json");
document.body.appendChild(downloadAnchorNode);

downloadAnchorNode.click();

Here is the modified code without the download attribute:

var JSONData = {
  foo: "bar"
};

var dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(JSONData));
var downloadAnchorNode = document.createElement('a');

downloadAnchorNode.innerHTML = "Click";
downloadAnchorNode.setAttribute("href", dataUri);
document.body.appendChild(downloadAnchorNode);

downloadAnchorNode.click();

It's worth noting that Internet Explorer does not support the download attribute.

Answer 2

If you are experiencing a blank page, it may be because you forgot to insert the anchor node into the DOM. Take a look at the code snippet below. Even without the download attribute, the page will display JSON data.

var JSONData = {
  foo: "bar"
};

var dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(JSONData));
var downloadAnchorNode = document.createElement('a');

downloadAnchorNode.innerHTML = "Click";
downloadAnchorNode.setAttribute("href", dataUri);
downloadAnchorNode.setAttribute("download", "CarData.json");
document.body.appendChild(downloadAnchorNode);

downloadAnchorNode.click();

Here is the modified code without the download attribute:

var JSONData = {
  foo: "bar"
};

var dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(JSONData));
var downloadAnchorNode = document.createElement('a');

downloadAnchorNode.innerHTML = "Click";
downloadAnchorNode.setAttribute("href", dataUri);
document.body.appendChild(downloadAnchorNode);

downloadAnchorNode.click();

It's worth noting that Internet Explorer does not support the download attribute.

Issue encountered while trying to download JSON file

Answer №1

Similar questions

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

How to remove a loop-rendered component from the DOM in Vue

Decoding JavaScript elements embedded in an HTML website

How come changes to the DOM are not recognized by subsequent DOM readings?

Changing HTML lists into JSON format

Save Chrome's console log programmatically

Click on the links to view various captions for a single image, one at a time

Adjust the size of a textarea once text is removed

chart.js version 3 does not display the correct date data on the time axis

Converting the given data into an object in JavaScript: a step-by-step guide

Parsing JSON objects with identifiers into TypeScript is a common task in web development

How to properly escape JSON with hyphen or dash in AngularJS ngSrc

Challenges with Page Loading in Selenium

"Troubleshooting HTTP requests in Angular: Dealing with

CSS styling failing to meet desired expectations

Add JSON elements to an array

"An issue with Angular Http Get causing Status 0 to be consistently returned when using ng

Increasing a variable in MongoDB using Meteor.js based on the value of a variable in a separate document

Inquiries for Web-Based Applications

"Utilize AJAX to submit the value of the text box input from a jQuery slider when the Submit Button