我如何使它「保存爲HTML」而不是「下載爲HTML」？

我正在做一個在線網頁編輯器，我需要這個。如何將它變成「另存爲」功能而不是「下載功能」？不同之處在於，在「下載爲」時，您無法確定應該使用的名稱，但在「另存爲」中，您可以在保存文件名之前決定保存文件的名稱。我如何使它「保存爲HTML」而不是「下載爲HTML」？

那麼，我該如何做到「另存爲」，而不是「下載爲」？ PS：如果你可以幫我添加一個「加載文件」按鈕，那也可以，那太棒了。

<html> 
    <head> 
    <style type="text/css">...</style> 
    <script type="text/JavaScript"> 
    window.onload = function() { 
     var txt = document.getElementById('html'); 
     txt.value = window.onload + ''; 
     document.getElementById('link').onclick = function(code) { 
     this.href = 'data:text/plain;charset=utf-8,' 
      + encodeURIComponent(html.value); 
     }; 
    }; 

    main(); 
    </script> 
    </head> 
    <body> 
    <div id="txtWrap"> 
     <textarea id="txt"></textarea> 
    </div> 
    <a href="" id="link" download="code.html">Download Above Code</a> 
    </body> 
</html>

來源

2017-03-03 SeekLoad

使用HTML5下載和文件API。 – SLaks

你的'main（）'函數不存在，你的'.onclick'函數不帶參數，'html'未定義。 –

https://github.com/rndme/download/讓你提供一個文件名和MIME（如文本/ HTML） – dandavis

下面的腳本利用了某些HTML5功能

function saveTextAsFile() 
 
{ 
 
    var textToSave = document.getElementById("inputTextToSave").value; 
 
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); 
 
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); 
 
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value; 
 
    
 
    var downloadLink = document.createElement("a"); 
 
    downloadLink.download = fileNameToSaveAs; 
 
    downloadLink.innerHTML = "Download File"; 
 
    downloadLink.href = textToSaveAsURL; 
 
    downloadLink.onclick = destroyClickedElement; 
 
    downloadLink.style.display = "none"; 
 
    document.body.appendChild(downloadLink); 
 
    
 
    downloadLink.click(); 
 
} 
 
    
 
function destroyClickedElement(event) 
 
{ 
 
    document.body.removeChild(event.target); 
 
} 
 
    
 
function loadFileAsText() 
 
{ 
 
    var fileToLoad = document.getElementById("fileToLoad").files[0]; 
 
    
 
    var fileReader = new FileReader(); 
 
    fileReader.onload = function(fileLoadedEvent) 
 
    { 
 
     var textFromFileLoaded = fileLoadedEvent.target.result; 
 
     document.getElementById("inputTextToSave").value = textFromFileLoaded; 
 
    }; 
 
    fileReader.readAsText(fileToLoad, "UTF-8"); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table> 
 
    <tr><td>Text to Save:</td></tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
      <textarea id="inputTextToSave" cols="30" rows="7" class="form-control" placeholder="enter your text here!"></textarea> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Filename to Save As:</td> 
 
     <td><input id="inputFileNameToSaveAs" placeholder="example.txt" class="form-control"></td> 
 
     <td><button class="btn btn-primary" onclick="saveTextAsFile()">Save Text to File</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Select a File to Load:</td> 
 
     <td><input class="form-control" type="file" id="fileToLoad"></td> 
 
     <td><button class="btn btn-primary" onclick="loadFileAsText()">Load Selected File</button><td> 
 
    </tr> 
 
</table>

來源

2017-03-03 03:27:15

這將是有益的補充說，這在IE中根本不起作用，並且Edge不會「榮譽」提供的文件名稱 –

您的代碼有一個小問題。這就是說，它保存爲TXT文件，我希望它保存爲HTML文件。我如何將它保存爲HTML文件？ – SeekLoad

使用純JS不可能編寫文件，但是您可以使用HTML5 W3C API ... 1. https://www.w3.org/TR/file-writer-api/ 2. https：// developers。 google.com/web/updates/2011/08/Saving-generated-files-on-the-client-side 3. https://eligrey.com/demos/FileSaver.js/ –

最後更新，完成

這是我自己做。無需查詢，它是以HTML或TXT格式從按鈕和所選文件名保存的最簡單，最乾淨的方式。現在，我只需要在一天內完成加載功能。

我最好的解決方案，如果你問我是這樣的。

例子：

現在，我做了一個更好的解決方案誰增加，因此固定到HTML文件的.html自動使用查詢的名稱。

<html> 
<head> 

<script language="Javascript" > 
function download(filename, text) { 
    var pom = document.createElement('a'); 
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text)); 
    pom.setAttribute('download', filename); 

    pom.style.display = 'none'; 
    document.body.appendChild(pom); 

    pom.click(); 

    document.body.removeChild(pom); 
} 
</script> 

    </head> 
<body> 

<script src="jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<form onsubmit="download(this['name'].value, this['text'].value)"> 

<textarea rows="10" cols="70" name="text" placeholder="Type your text here:"></textarea> 
<br> 
<input type="text" name="name" id="txt" value="" placeholder="File Name"> 
<input type="submit" id="btn" value="Save As"> 
</form> 
    <script type="text/javascript"> 
      jQuery("#btn").on('click', function() { 
     var $txt = jQuery("#txt"); 
     var caretPos = $txt[0].selectionStart; 
     var textAreaTxt = $txt.val(); 
     var txtToAdd = ".html"; 
     $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos)); 
    }); 
    </script> 
</body> 
</html>

來源

2017-03-03 05:28:48 SeekLoad

我如何使它「保存爲HTML」而不是「下載爲HTML」？

回答

相關問題