如何使用 JavaScript 在離線 html 項目中創建文件 [暫停]

Question

如何使用按鈕 onclick function 創建三個單獨的文件並將其保存到內部存儲。 我沒有在服務器上運行代碼，而是在 ide 內運行代碼。 我的意圖是構建我自己的 ide，它看起來像 codepen。 該項目非常基礎，它離線而不是在線工作。 我打算讓它成為 android 手機的應用程序。


  
  
   
    
    <!Doctype html>
  <html>
 <head>
    <title>HTML editor</title>
      <head>
   <body>
<div>
   <textarea Id="html"></textarea>

<textarea Id="css"></textarea>

<textarea Id="js"></textarea>

    <!--Add iframe to display to display results-->

       <iframe id="code"></iframe>
 <button onclick="Create_and_Save()">Save</button>

<script>
function compile(){

var html = document.getElementById("html");

var css = document.getElementById("css");

var js = document.getElementById("js");

var code = document.getElementById("code"). contentWindow.document;

try{
document.body.onkeyup = function (){
code.open();
code.writeIn(html.value + "<style>" + css.value + "</style>" + "<script>" + js.value + "</style>" );
code.close();
}

}//End of try...

catch(err){
alert(err);
}

}//End of compile..

compile();

</script>

<script>

function Create_and_Save(){

var html = document.getElementById("html").value;

var css = document.getElementById("css").value;

var js = document.getElementById("js").value;

//What I want to achieve is to create three individual file with their extensions.
//.html
//.css
//.js
//when I click the button.
}
</script>
</body>
</html>

Answer 1

如果您嘗試在沒有用戶交互的情況下創建和保存文件，那么出於安全原因，瀏覽器不允許這樣做。

如果“另存為”對話框足以滿足您的解決方案，那么這可能是一個相關的答案。

Answer 2

First you base64 encode the content if your textarea ( https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding ) and then you add this encoded content to a link and stream it...如此處所述： https://stackoverflow.com/a/3665147/2397550 。 此類鏈接的示例如下所示：

 <a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

八位字節流是強制下載提示。 否則，它可能會在瀏覽器中打開。 資源

如何使用 JavaScript 在離線 html 項目中創建文件 [暫停]

問題描述

2 個解決方案

解決方案1
-1 2019-10-23 23:02:11

解決方案2
-1 2019-10-23 23:08:55

如何使用 JavaScript 在離線 html 項目中創建文件 [暫停]

問題描述

2 個解決方案

解決方案1 -1 2019-10-23 23:02:11

解決方案2 -1 2019-10-23 23:08:55

解決方案1
-1 2019-10-23 23:02:11

解決方案2
-1 2019-10-23 23:08:55