Solving Chrome Large File Download Crash and atob Decoding Errors

Problem Background and Error Analysis

In web development, users often need to download the HTML source code of current pages. Traditional methods using data:URL schemes can cause Chrome browser crashes when file sizes exceed approximately 1.99MB. The initial solution attempted by developers involved encodeURIComponent and data:URLs, but encountered size limitation issues.

Subsequent attempts using Blob API resulted in Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded error. The root cause of this error was incorrectly passing HTML strings directly to functions expecting Base64-encoded data. Specifically, the dataURItoBlob function expected to receive data URIs in the format data:[<mediatype>][;base64],<data>, but was actually passed plain HTML markup strings.

Correct Usage of Blob API

Modern browsers provide a more elegant solution—using the Blob constructor instead of the deprecated BlobBuilder. Blob objects represent immutable raw data and can easily create data objects containing arbitrary content.

Here is the correct implementation code:

function downloadHTML(filename, content) {
    const blob = new Blob([content], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // Release URL object
    URL.revokeObjectURL(url);
}

// Usage example
downloadHTML('page_source.html', document.documentElement.outerHTML);

Comparative Analysis of Error Solutions

In the original erroneous code, developers mistakenly believed that HTML content needed Base64 encoding. Actually, the Blob constructor can directly process string content without any intermediate encoding steps. The atob call in the error code failed precisely because the input was not a valid Base64 string.

Referencing other similar error scenarios, such as configuration parsing issues in React applications, also often cause atob execution failures due to string encoding mismatches. This emphasizes the importance of ensuring correct data formats when handling encoding conversions.

Complete Implementation and Best Practices

For a more robust solution, consider browser compatibility and error handling:

function safeDownload(filename, content, mimeType = 'text/html') {
    try {
        // Prefer File constructor if available
        let file;
        if (typeof File !== 'undefined') {
            file = new File([content], filename, { type: mimeType });
        } else {
            file = new Blob([content], { type: mimeType });
        }
        
        const url = URL.createObjectURL(file);
        
        // Create temporary link to trigger download
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.download = filename;
        
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // Delay URL revocation to ensure download completion
        setTimeout(() => URL.revokeObjectURL(url), 100);
        
        return true;
    } catch (error) {
        console.error('Download failed:', error);
        return false;
    }
}

// Respond to Ctrl+S shortcut
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        safeDownload('page_source.html', document.documentElement.outerHTML);
    }
});

Technical Key Points Summary

1. Avoid data URL size limitations: Using Blob API can handle large files without causing browser crashes.

2. Correct usage of encoding functions: Use atob/btoa only when Base64 encoding is truly needed, and ensure correct input format.

3. Modern API priority: Use Blob constructor instead of deprecated BlobBuilder.

4. Resource management: Use URL.revokeObjectURL to promptly release created URL objects and avoid memory leaks.

5. User experience: Specify filenames through the download attribute to provide better download experience.