我如何使它“保存为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”？

回答

相关问题