Gibt es eine Download-Funktion in jsFiddle?

Gibt es in jsFiddle eine Download-Funktion, mit der Sie einen HTML-Code mit CSS, HTML und JS in einer Datei herunterladen und für Debug-Zwecke ohne jsFiddle ausführen können?

Ok, ich habe herausgefunden:

Sie müssen /shownach der URL, an der Sie arbeiten, eine
eingeben : http://jsfiddle.net/<Ihre_Fiddle_ID>/show/ Auf
dieser Website werden die Ergebnisse angezeigt .

Und dann, wenn Sie es als Datei speichern. Es ist alles in einer HTML-Datei.

Zum Beispiel:
http://jsfiddle.net/Ua8Cv/show/
für die Site http://jsfiddle.net/Ua8Cv

Neue Antwort auf eine alte Frage:

Methode 1:

Schritt 1 : Sie müssen /shownach der URLArbeit setzen:

http://jsfiddle.net/<fiddle_id>/show/ 

Es zeigt die Ausgabe mit einem Ergebnisheader.

Schritt 2 : Klicken Sie mit der rechten Maustaste auf den unteren Frame und wählen Sie Frame-Quelle anzeigen . Das ist es. Sie haben den HTML-Code mit Online-JS-Links, CSS.

Speichern Sie es einfach.

Zum Beispiel: http://jsfiddle.net/YRafQ/20/show/ für die Site http://jsfiddle.net/YRafQ/20/

Hinweis: Frame-Quelle anzeigen und nicht Seitenquelle anzeigen

Methode 2:

Sie können diesen Code verwenden: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Zum Beispiel: Für meine fiddle_id: YRafQ/20

view-source:http://fiddle.jshell.net/YRafQ/20/show/light/

Das Hinzufügen / Anzeigen stellt keinen reinen Quellcode dar, sondern ist ein eingebettetes Arbeitsbeispiel. Verwenden Sie Folgendes, um es ohne zusätzliche Skripte, CSS und HTML anzuzeigen:

http://fiddle.jshell.net/<fiddle id>/show/light/

Ein Beispiel: http://fiddle.jshell.net/Ua8Cv/show/light/

Nein, JSFiddle hat keine Download-Funktion. Es ist jedoch nicht sehr schwierig, das zu umgehen und den Inhalt einer Geige zu speichern.

Seit der Veröffentlichung der akzeptierten Antwort hat JSFiddle einige Änderungen an der Benutzeroberfläche und am Backend vorgenommen, die sich auf die Art und Weise auswirken, wie eine Geige heruntergeladen werden soll. Beachten Sie die aktualisierten Verfahren unten.

Einfache Befehlszeilenmethode

Diese Methode lädt nur HTML, JavaScript und CSS der Geige als einzelne Datei herunter. Die externen Ressourcen der Geige werden nicht gespeichert.

fiddle_idBezieht sich in der unten gezeigten Befehlszeile auf die ID-Nummer der Geige. Für eine Geige mit der URL " http://jsfiddle.net/<fiddle_user>/<fiddle_id>" oder " http://jsfiddle.net/<fiddle_id>" wird nur die fiddle_idbenötigt. Das fiddle_userist unwichtig.

Geben Sie an einer Shell-Eingabeaufforderung die einzelne Befehlszeile ein:

fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"

Die Geige wird in einer Datei mit dem Namen " fiddle_id.html" gespeichert .

Längere Browsermethode

Diese Methode lädt die Geige sowie ihre externen Ressourcen herunter. Die angegebenen Schritte basieren auf der Verwendung von Google Chrome. Die Verwendung anderer Webbrowser sollte ebenfalls funktionieren, sie können jedoch andere Dateinamen verwenden.

1. Wählen Sie das Share/EmbedMenü / den Link " " oben auf der JSFiddle-Bearbeitungsseite. Kopieren Sie im angezeigten Dialogfeld die im Feld " Share full screen result" angezeigte URL . Es wird die Form " http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/" oder " http://jsfiddle.net/<fiddle_id>/embedded/result/" haben.
2. Öffnen Sie ein neues Browserfenster und fügen Sie die im vorherigen Schritt kopierte URL ein. Laden Sie diese Seite.
3. Verwenden Sie die Speicherfunktion Ihres Browsers, um die Seite und alle ihre Ressourcen auf Ihrem lokalen Computer zu speichern. Um beispielsweise alle Ressourcen mit Google Chrome zu speichern, müssen Sie Webpage, Completeim FormatMenü " " " " auswählen . Stellen Sie sicher, dass Sie einen Namen für die Seite angeben. Nehmen wir an, es heißt in fiddle.htmldiesem Beispiel " ".
4. Nachdem die Seite auf Ihrem Computer gespeichert wurde, haben Sie die fiddle.htmlDatei " " und ein Verzeichnis mit dem Namen " fiddle_files". Die Datei " fiddle.html" ist die Wrapper-Seite, auf der JSFiddle einen Header mit einem "Ergebnis" -Titel und anderen Links anzeigt. Es wird Ihre Geige in ein Iframe-Element laden. Zum größten Teil kann diese Datei ignoriert oder sogar gelöscht werden. Der HTML-, JavaScript- und CSS-Inhalt Ihrer Geige wird im fiddle_filesVerzeichnis " " als einzelne Datei mit dem Namen " saved_resource.html" gespeichert .
5. Kopieren Sie " fiddle_files/saved_resource.html" dorthin, wo Sie es verwenden möchten. Wenn Ihre Geige Elemente unter " External Resources" enthält, werden diese auch im fiddle_filesVerzeichnis " " angezeigt. Stellen Sie sicher, dass Sie diese Dateien an denselben Ort kopieren, an den Sie " saved_resource.html" kopiert haben , da die HTML-Datei unter Verwendung relativer URLs auf diese Ressourcen verweist.

Wie bereits erwähnt, können andere Browser die Dateien beim Speichern anders benennen. Beispielsweise nennt Firefox die kombinierte HTML / JS / CSS-Datei " fiddle_files/a.html".

Es werden immer noch keine Download-Funktionen unterstützt. ABER Sie können das Knotenskript jsfiddle-downloader verwenden .

Installation :

npm install jsfiddle-downloader -g

So laden Sie eine einzelne Geige von ihrer ID herunter :

jsfiddle-downloader -i <fiddle-id> [-o <output file>]

So laden Sie eine einzelne Geige von ihrer URL herunter :

jsfiddle-downloader -l <url> [-o <output file>]
jsfiddle-downloader -l jsfiddle.net/<user>/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<user>/<fiddle-id>/show/ -o myfiddle.html

So laden Sie alle Skripte eines bestimmten "Benutzers" von jsFiddle.net herunter:

jsfiddle-downloader -u <user> [-o <output file>]

Es werden alle Backups im aktuellen Verzeichnis heruntergeladen. Die jsFiddles-Skripte werden wie folgt benannt:

[<output-folder>/]<id-fiddle>.html

Schritt 1:
Gehen Sie zu einer Geigen-Seite wiejsfiddle.net/oskar/v5893p61

Schritt 2:
Fügen Sie '/ show' am Ende der URL hinzu, wie zjsfiddle.net/oskar/v5893p61/show

Schritt 3:
Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf die Ansicht Frame-Quelle . Sie erhalten den HTML-Code einschließlich CSS im Tag und Javascript (js) im Tag. [Auch der Quelllink aller Bibliotheken wird hinzugefügt]. Siehe Screenshot

Schritt 4:
Jetzt können Sie den Quellcode in einer HTML-Datei speichern.

Der beste Weg ist:

1. Klicken Sie mit der rechten Maustaste auf das Ausgabefeld.
2. Wählen Sie Ansichtsrahmenquelle, dann wird der gesamte Code angezeigt.

Danach können Sie diesen Code kopieren und in Ihren Computer einfügen.

In einer kürzlich durchgeführten Arbeit musste ich eine Liste von Geigen-URLs herunterladen und für jede Geige einen eigenen Ordner mit einer eigenen HTML-CSS-JS-Datei erstellen. Dazu habe ich das folgende Crawler-Programm erstellt. https://github.com/sguha-work/FiddleCrawler. Es wird ein Ordnername mit einem Zählerwert erstellt und jeder Ordner verfügt über eine HTML-, eine CSS-, eine JS- und eine Details-Datei. (Die Details-Datei enthält die Links externer Ressourcen).

Ich habe einen Artikel unter dem obigen Thema gefunden. Dort könnte ich den vollständigen Code übernehmen. Ich werde ihn erwähnen.

Hier sind die im Artikel genannten Schritte:

1. Fügen Sie eingebettet / result / am Ende der JSFiddle-URL hinzu, die Sie abrufen möchten.

2. Zeigen Sie den Frame oder den Quellcode des Frames an: Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und zeigen Sie den Frame sofort auf einer neuen Registerkarte oder in der Quelle an (erfordert Firefox).

3. Speichern Sie zum Schluss die Seite in Ihrem bevorzugten Format (MHT, HTML, TXT usw.) und voilà!

Sie können es auch finden: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

Sie können mit diesem Paket in Knoten js herunterladen,

https://www.npmjs.com/package/jsfiddle-downloader

Sie müssen nach der URL, an der Sie arbeiten, eine einfügen / anzeigen:

Beispielsweise:

"http://jsfiddle.net/rkw79/PagTJ/show/"

für Feld URL:

"http://jsfiddle.net/rkw79/PagTJ/"

Speichern Sie danach die Datei und wechseln Sie in den Ordner show (oder den Dateinamen, mit dem Sie gespeichert haben) unter diesem Ordner. Sie erhalten eine HTML-Datei show_resource.HTML. Dies ist Ihre eigentliche Datei. Öffnen Sie sie jetzt im Browser und zeigen Sie den Quellcode an . Viel Glück -------- Ujjwal Gupta

Okay, der einfachste Weg, den ich herausgefunden habe, war, einfach die URL (jsfiddle [dot] net) in fiddle [dot] zu ändern. Jshell [dot] net / Da hast du einen klaren HTML-Code ohne jeglichen Iframe ... Beispiel: https: // jsfiddle [dot] net / mfvmoy64 / 27 / show / light / -> http: // fiddle [dot] jshell [dot] net / mfvmoy64 / 27 / show / light /

( Muss das '.' Wegen wegen des Stapelüberlaufs in "[Punkt]" ändern ...: c ) PS: sry 4 schlechtes Englisch

Es gibt keine so richtige Möglichkeit, alle Dinge zusammen von JSFiddle herunterzuladen, aber es gibt eine Hack-Methode, um genau das zu tun. Fügen Sie einfach "embedded /" oder "embedded / result /" am Ende Ihrer JSFiddle-URL hinzu! Dann können Sie die gesamte Seite als HTML-Datei + die externen Bibliotheken speichern (wenn Sie möchten).

Es gibt ein npm-Paket jsfiddle-downloader.

Verwenden Sie http://jsfiddle.net/ / show / light /

Verwenden Sie dann einfach die Inspect-Element-Funktion des Browsers. Sie erhalten Code in der Registerkarte Iframe. . In Chrome klicken Sie einfach mit der rechten Maustaste und klicken Sie auf Als HTML-Registerkarte bearbeiten. und kopieren Sie den HTML-Inhalt. das ist dein eigentlicher Code.

Ctrl+ S, speichert die gesamte Geige, im Dateiordner befindet sich die gesuchte saubere Seite