このようにするのだ
<!DOCTYPE html>
<html>
<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>Myself</title>
</head>
<body>
<div contenteditable="true" style="width: 500px; height: 300px; border: solid 1px black;">
ほげほげ
</div>
<button onclick="download()">このページをダウンロード</button>
<script>
function download() {
// DOCTYPE宣言とhtmlタグとその内部のコードの文字列から自分自身のHTMLのコードの文字列を生成
const htmlText = "<!DOCTYPE html>" + document.getElementsByTagName("html")[0].outerHTML;
// HTMLのコードの文字列をBlobにし、aタグに紐づけてダウンロードさせる。
const blob = new Blob([htmlText], {type:"text/plan"});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "index.html";
link.click();
URL.revokeObjectURL(link.href);
}
</script>
</body>
</html>
なおIEでは動きません。