document.execCommand('SaveAs', null, 'myFile.html'); 是否有替代方案？在 chromium 浏览器中 (Microsoft-Edge)

Question

我需要通过 window.open 方法保存一个 html 文件，document.execCommand('SaveAs', null, 'abc.html'); 解决了 Internet Explorer 中的目的，但相同的脚本在 Microsoft-Edge (chromium) 中不起作用。

我习惯于 Window.showSaveFilePicker() 将文件保存在 chrome 中，但我可以传递硬编码字符串。我需要从 Window.Open HTML 文件中获取数据并使用 microsoft-edge 保存。

需要知道在 Internet Explorer 和 Microsoft-Edge (chromium) 中都可以使用的通用代码

谢谢

//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>

Answer 1

我觉得你可以尝试在不同的浏览器中使用不同的方法。参考this case，确定使用的浏览器

另外，如果需要在Edge中保存window.open()打开的页面内容，可以尝试在页面加载后获取其句柄，然后获取其DOM元素.

一个简单的演示：

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);
}

document.execCommand('SaveAs', null, 'myFile.html'); 是否有替代方案？在 chromium 浏览器中 (Microsoft-Edge)

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

javascript

asp.net-mvc

chromium

microsoft-edge

microsoft-edge-chromium