I have created a function which will dynamically append xml content to a string variable on browser on load time . However, when the string becomes enormous , it will result in memory loss. I have created a function which enable user to download as xls format.

For an example,

//This has 1k records which are translated as xml content that is stored in uri variable on browser. We are able to download xls file with no issue

//String length e.g 20k
var workbookXML = 'data:application/vnd.ms-excel;base64,.......<?xml version="1.0"?><?mso-.application progid="Excel.Sheet"?>.........'

now when im appending high volume of data that are translated into xml content , this will result the browser to stop and prompt Memory loss issue on browser

//String length e.g 20million
var workbookXML = 'data:application/vnd.ms-excel;base64,.......<?xml version="1.0"?><?mso-.application progid="Excel.Sheet"?>.........'

I have look into writableStream but this will result the same as this will be on browser. . What are best approaches in this use cases to resolve big data into a single string variable on browser?

Should i convert string into binary, bytes before exporting as xls format ?

        var excel_blob = new Blob([workbookXML], { type: 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        var link = document.createElement("A");
        link.href = window.webkitURL.createObjectURL(excel_blob)
        link.download = "BigData" + ".xls";
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);