时间戳

首页 > 解决方案 > document.execCommand('SaveAs', null, 'myFile.html'); 是否有替代方案？在铬浏览器中（Microsoft-Edge）

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

问题描述

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

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

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

谢谢

//索引.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>

//索引.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>

在 IE 中工作

铬错误

标签： javascriptasp.net-mvcmicrosoft-edgechromiummicrosoft-edge-chromium

解决方案

我认为您可以尝试在不同的浏览器中使用不同的方法。参考这个案例，确定使用的浏览器。

另外，如果需要将window.open()打开的页面内容保存在Edge中，可以在页面加载完成后尝试获取其句柄，然后获取其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);
}

推荐阅读