it-swarm.com.de

Gibt es eine Download-Funktion in jsFiddle?

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

155
JustGoscha

Ok ich habe herausgefunden: 

Sie müssen nach der URL, an der Sie arbeiten, einen /show eingeben: 
http://jsfiddle.net/<Ihre_fiddle_id>/show/
Die Website zeigt die Ergebnisse.

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 Website http://jsfiddle.net/Ua8Cv

238
JustGoscha

Neue Antwort auf eine alte Frage:

Methode 1:

Schritt 1: Sie müssen /show hinter der URL setzen, an der Sie arbeiten:

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

Es zeigt die Ausgabe mit einem Ergebniskopf.

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

Speichern Sie es einfach.

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

Hinweis: View Frame Source und nicht View Page Source

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 von/show stellt keinen reinen Quellcode dar, sondern ein eingebettetes Arbeitsbeispiel. Um es ohne zusätzliche Skripte, css und html anzuzeigen, verwenden Sie:

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

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

14
Suprido

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

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


Einfache Befehlszeilenmethode

Bei dieser Methode werden nur HTML, JavaScript und CSS der Geige als einzelne Datei heruntergeladen. Die externen Ressourcen der Geige werden nicht gespeichert. 

In der unten gezeigten Befehlszeile bezieht sich fiddle_id 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 der fiddle_id benötigt. Der fiddle_user ist 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 Menü/den Link "Share/Embed" 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. Lade diese Seite.
  3. Verwenden Sie die Speicherfunktion Ihres Browsers, um die Seite und alle zugehörigen Ressourcen auf Ihrem lokalen Computer zu speichern. Um beispielsweise alle Ressourcen mit Google Chrome zu speichern, wählen Sie im Menü "Format" unbedingt "Webpage, Complete" aus. Stellen Sie sicher, dass Sie einen Namen für die Seite angeben. Nehmen wir an, es heißt in diesem Beispiel "fiddle.html".
  4. Nachdem die Seite auf Ihrem Computer gespeichert wurde, haben Sie die Datei "fiddle.html" und ein Verzeichnis mit dem Namen "fiddle_files". Die Datei "fiddle.html" ist die Wrapper-Seite, die JSFiddle verwendet, um eine Kopfzeile mit dem Titel "Ergebnis" und anderen Links anzuzeigen. Es wird Ihre Geige in ein iframe-Element laden. Diese Datei kann zum größten Teil ignoriert oder sogar gelöscht werden. Der HTML-, JavaScript- und CSS-Inhalt Ihrer Geige wird im Verzeichnis "fiddle_files" 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 Verzeichnis "fiddle_files" angezeigt. Kopieren Sie diese Dateien an den Ort, an den Sie "saved_resource.html" kopiert haben, da die HTML-Datei diese Ressourcen mit relativen URLs referenziert.

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

10
L S

Es werden noch keine Download-Funktionen unterstützt .. ABER .. Sie können das Skript jsfiddle-downloader node 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

Um alle Skripte eines bestimmten 'Benutzers' von jsFiddle.net herunterzuladen:

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

Es werden alle Sicherungen im aktuellen Verzeichnis heruntergeladen. Die jsFiddles-Skripts werden wie folgt benannt:

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

Der beste Weg ist:

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

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

4
ASammour

Sie müssen nach der URL, an der Sie gerade arbeiten, ein/angeben:

Zum Beispiel:

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

für Feld-URL:

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

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

2

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

1
Angshu Guha

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

Hier sind die im Artikel genannten Schritte:

  1. Fügen Sie eingebettetes/result/am Ende der JSFiddle-URL ein, die Sie erfassen 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 auf einer neuen Registerkarte oder der Quelle rechts an (erfordert Firefox).

  3. Zum Schluss speichern Sie 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/

1
casper

Okay, der einfachste Weg, ich stellte fest, dass nur die URL (jsfiddle [dot] net) geändert wurde, um [dot] jshell [dot] net /.__ zu wechseln. Dort gibt es einen klaren HTML-Code ohne jegliche Art von Iframe. Beispiel: https: // jsfiddle [dot] net/mfvmoy64/27/show/light/ -> http: // fiddle [dot] jshell [dot] net/mfvmoy64/27/show/light/

(Muss wegen 'stackeroverflow' die '.' S in '[dot]' ändern ...: c) PS: sry 4 bad english

0
lo1c

Sie können dieses Paket in Knoten js herunterladen,

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

0
MegaCha05

Schritt 1: 
Gehe zu einer Geigenseite wie jsfiddle.net/oskar/v5893p61

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

Schritt 3: 
Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf die Frame-Quelle View. 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.

0
johirpro