Wie stelle ich dies auf "Als HTML speichern" statt als "Download als HTML"?

Ich mache einen Online-Web-Editor und ich brauche das. Wie mache ich das zu einer "Speichern als" -Funktion anstelle dessen, was es eine "Download-Funktion" ist? Der Unterschied ist, dass Sie bei "download as" nicht entscheiden können, welcher Name es sein soll, aber in "save as" können Sie den Namen der gespeicherten Datei vor dem Speichern festlegen.Wie stelle ich dies auf "Als HTML speichern" statt als "Download als HTML"?

Also wie mache ich das zu "speichern unter" statt "download as"?

PS: Wenn Sie mir helfen könnten, eine "Datei laden" -Schaltfläche hinzuzufügen, die funktioniert, wäre das großartig.

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

Quelle

2017-03-03 SeekLoad

Verwenden Sie die HTML5-Download- und Datei-APIs. – SLaks

Ihre 'main()' Funktion existiert nicht, Ihre '.onclick' Funktion nimmt keinen Parameter und' html' ist nicht definiert. –

https://github.com/rndme/download/ können Sie einen Dateinamen und Mime (wie text/html) – dandavis

Die unten Skript nutzt einige HTML5-Funktionen

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>

Quelle

2017-03-03 03:27:15

bereitstellen Es wäre sinnvoll hinzuzufügen, dass dies überhaupt nicht funktioniert in IE, und Edge wird nicht "Ehre" der angegebene Dateiname –

Es gibt ein kleines Problem mit diesem Code von Ihnen. Und das ist, dass es als TXT-Datei speichert und ich möchte es als HTML-Datei speichern. Wie kann ich es als HTML-Datei speichern? – SeekLoad

Mit reinem JS ist es nicht möglich, Dateien zu schreiben, aber Sie können mit HTML5 W3C API tun ... 1. https://www.w3.org/TR/file-writer-api/ 2. https: // Entwickler. google.com/web/updates/2011/08/Saving-generated-files-on-the-client-side 3. https://eligrey.com/demos/FileSaver.js/ –

FINAL UPDATE und fertig

Das habe ich selbst gemacht. Keine Abfrage erforderlich und es ist die einfachste und sauberste Möglichkeit, es in HTML oder TXT von einer Schaltfläche und mit dem Dateinamen Ihrer Wahl zu speichern. Jetzt muss ich die Ladefunktion nur noch an einem anderen Tag ausführen.

Beste Lösung, die ich gemacht habe, wenn Sie mich fragen, ist dies.

Beispiel:

Jetzt habe ich eine noch bessere Lösung, die automatisch Frage an den Namen mit .html fügt hinzu, so dass es fest ist in HTML-Dateien.

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

Quelle

2017-03-03 05:28:48 SeekLoad

Wie stelle ich dies auf "Als HTML speichern" statt als "Download als HTML"?

Antwort

Verwandte Themen