Technical Implementation and Optimization of JSON Object File Download in Browsers

Introduction

In modern web development, exporting data as files for user download is a common requirement. While downloading CSV files is relatively straightforward, downloading JSON objects presents certain technical challenges. This article systematically analyzes the technical implementation of JSON object downloads based on practical development experience.

Limitations of Traditional Data URL Methods

Developers initially attempted to implement JSON downloads using the data URL scheme:

exportData = 'data:text/json;charset=utf-8,';
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

This approach works for CSV files but encounters issues when handling JSON. Browsers tend to display JSON content within the page rather than triggering a download. This occurs due to variations in how different browsers handle data URL MIME types.

Optimized Solution Based on Anchor Elements

To address these issues, a solution combining anchor elements with the download attribute can be employed:

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

This solution offers several advantages: no manual user clicking required, support for custom file names, and independence from third-party libraries like jQuery. The key lies in using the download attribute, which explicitly instructs the browser to perform a download operation rather than content display.

Pure JavaScript Dynamic Implementation

For scenarios requiring complete programmatic control over downloads, anchor elements can be created dynamically:

function downloadObjectAsJson(exportObj, exportName) {
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

This method is particularly suitable for automated download scenarios, such as scheduled exports and batch processing. Note that in Firefox, elements must be added to the DOM before click events can be triggered.

Modern Solution Based on Blob API

Referencing modern web standards, the Blob API provides a more elegant solution:

const JSONToFile = (obj, filename) => {
    const blob = new Blob([JSON.stringify(obj, null, 2)], {
        type: 'application/json',
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${filename}.json`;
    a.click();
    URL.revokeObjectURL(url);
};

The Blob solution offers advantages in better memory management and cross-browser compatibility. Temporary URLs are created via URL.createObjectURL(), with resources promptly released by calling URL.revokeObjectURL() after download completion.

Technical Detail Analysis

Several key points require attention during implementation: character encoding should use encodeURIComponent rather than simple escape; JSON serialization can achieve formatting through the second parameter of JSON.stringify; file naming should consider user habits and system limitations.

Performance and Compatibility Considerations

For large JSON objects, chunked processing or streaming downloads are recommended. Regarding compatibility, the data URL scheme supports IE10+, while the Blob solution requires IE10+ with full URL API support. Mobile browsers may impose restrictions on automatic downloads.

Best Practice Summary

Considering functional requirements, performance, and browser compatibility, the Blob API solution is recommended as the primary choice. For simple scenarios or projects with extreme compatibility requirements, the anchor element solution provides reliable performance. Regardless of the chosen approach, appropriate error handling and user feedback should be implemented.