0
257
ViewsIs there an alternative for document.execCommand('SaveAs', null, 'myFile.html'); in chromium browsers (Microsoft-Edge)
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>
1 answers
Answer question0
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);
}