Question

我正在制作一个在线网络编辑器，我需要这个。如何将其变为＆＃34;另存为＆＃34;功能而不是它是什么＆＃34;下载功能＆＃34;？区别在于＆＃34;下载为＆＃34;你不能决定它应该是什么名字，但在＆＃34;保存为＆＃34;您可以在保存前确定保存文件名。

那么我该怎么做到＆＃34;另存为＆＃34;而不是＆＃34;下载为＆＃34;？

PS：如果你可以帮我添加一个＆＃34;加载文件＆＃34;按钮也是有效的，那会很棒。

<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>

Answer 1

以下脚本使用了一些HTML5功能

＆＃13;

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");
}

＆＃13;

Answer 2

最终更新并完成

我自己做了。不需要查询，它是从按钮和您选择的文件名保存在HTML或TXT中的最简单，最简洁的方法。现在我只需要在另一天完成加载功能。

如果你问我这是我做的最佳解决方案。

示例：

现在我做了一个更好的解决方案，他使用Query自动添加.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>

如何将其另存为＆＃34;另存为HTML＆＃34;而不是像'＃34;下载为HTML＆＃34;？

2 个答案: