Is there an alternative for document.execCommand('SaveAs', null, 'myFile.html'); in chromium browsers (Microsoft-Edge)

Question

I need to save a html file from window.open method, document.execCommand('SaveAs', null, 'abc.html'); solves the purspose in Internet Explorer but same script is not working in Microsoft-Edge (chromium).

I have used to Window.showSaveFilePicker() for saving the files in chrome but i can pass a hard-coded string. I need to get the data from Window.Open HTML file and save that using microsoft-edge.

Need to know a common code that will work in both Internet Explorer and Microsoft-Edge (chromium)

Thank you

//Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Index.js"></script>
</head>
<body>
    
    <button type="button" onclick="onSaveInIE()">In IE</button>


    <button type="button" onclick="onSaveInChrome()">In Chrome</button>

</body>
</html>

//Index.js

function onSaveInIE() {
    var csvWindow = openNewWindowObj();
    csvWindow.document.execCommand('SaveAs', null, 'abc.html');
    csvWindow.close();
}

function openNewWindowObj() {
    var newWindowObj = window.open("window.html", "New popup Window", 'height=200,width=150')
    newWindowObj.focus();

    return newWindowObj;
}

async function onSaveInChrome() {

    let fileHandle = await window.showSaveFilePicker();

    const writeable = await fileHandle.createWritable();

    await writeable.write("DummyData");

    writeable.close();
}

//window.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>From popup window</b>
</body>
</html>

According to your description, I created a simple demo but failed to reproduce your problem. And the results are different with yours. In Edge (Version 94.0.992.38), it can display File Explorer, but it will not fill in the file name. Can you provide more details, which will help solve the problem. For example, the version of the browser used for testing. — Xudong Peng, Oct 04 '21 at 10:33
@XudongPeng In chrome browser, i would like to save a file as html which is opened in a new window. That was the issue. Could you please try calling the openNewWindowObj() inside onSaveInChrome() and save the reponse as HTML. If we call showSaveFilePicker before the window.open, i'm not getting any console errors now. But the response html is newWindowObj is empty. So the saved HTML is showing as blank. — Ambareesh, Oct 06 '21 at 07:36

score 0 · Accepted Answer · answered Oct 08 '21 at 10:21

I think you can try to use different methods in different browsers. Refer to this case, determine the browser used.

In addition, if you need to save the content of the page opened by window.open() in Edge, you can try to get its handle after the page is loaded, and then get its DOM element.

A simple demo:

function onSaveInIE() {
    var csvWindow = openNewWindowObj();
    csvWindow.document.execCommand('SaveAs', null, 'filename.html');
    csvWindow.close();
}

function openNewWindowObj() {
    var newWindowObj = window.open("window.html", "New popup Window", 'height=200,width=150')
    newWindowObj.focus();

    return newWindowObj;
}

function onSaveInChrome() {
    var csvWindow = openNewWindowObj();
    csvWindow.onload = function () {
        popupHtml = csvWindow.document.documentElement.outerHTML;
        download('filename.html', popupHtml);
        csvWindow.close();
    }
}

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Is there an alternative for document.execCommand('SaveAs', null, 'myFile.html'); in chromium browsers (Microsoft-Edge)

1 Answers1