web-dev-qa-db-fra.com

Existe-t-il une fonction de téléchargement dans jsFiddle?

Existe-t-il une fonction de téléchargement dans jsFiddle, ce qui vous permet de télécharger un fichier HTML avec CSS, HTML et JS dans un seul fichier, de sorte que vous puissiez l'exécuter sans jsFiddle à des fins de débogage?

155
JustGoscha

Ok j'ai découvert: 

Vous devez mettre /show a après l'URL sur laquelle vous travaillez: 
http://jsfiddle.net/<your_fiddle_id>/show/
C'est le site qui montre les résultats.

Et puis quand vous enregistrez en tant que fichier. Tout est dans un fichier HTML.

Par exemple:
http://jsfiddle.net/Ua8Cv/show/
pour le site http://jsfiddle.net/Ua8Cv

238
JustGoscha

Nouvelle réponse à une vieille question:

Méthode 1:

Étape 1: Vous devez mettre /show après la URL sur laquelle vous travaillez:

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

Il montre la sortie avec un en-tête de résultat.

Étape 2: cliquez avec le bouton droit de la souris sur le cadre du bas et sélectionnez Voir le cadre de la source. C'est tout. Vous avez le code HTML avec liens JS en ligne, CSS.

Il suffit de le sauvegarder.

Par exemple: http://jsfiddle.net/YRafQ/20/show/ Pour le site http://jsfiddle.net/YRafQ/20/

Remarque: View Frame Source et non View Page Source

Méthode 2:

Vous pouvez utiliser ce code: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Par exemple: Pour mon ID de violon: YRafQ/20

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

Ajouter/afficher ne présente pas un code source pur, c'est un exemple de travail incorporé. Pour l'afficher sans autres scripts, css et html, utilisez:

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

Un exemple: http://fiddle.jshell.net/Ua8Cv/show/light/

14
Suprido

Non, JSFiddle n’a pas de fonction de téléchargement. Cependant, il n’est pas très difficile de contourner ce problème et de sauvegarder le contenu d’un violon de toute façon.

Depuis le moment où la réponse acceptée a été publiée, JSFiddle a récemment apporté des modifications à l'interface utilisateur et au back-end qui affectent la manière dont un violon doit être téléchargé. Notez les procédures mises à jour ci-dessous.


Méthode de ligne de commande simple

Cette méthode télécharge uniquement les fichiers HTML, JavaScript et CSS du violon en tant que fichier unique. Les ressources externes du violon ne sont pas enregistrées. 

fiddle_id fait référence au numéro d'identification du violon. Pour un violon avec l'URL "http://jsfiddle.net/<fiddle_user>/<fiddle_id>" ou "http://jsfiddle.net/<fiddle_id>", seul le fiddle_id est nécessaire. Le fiddle_user est sans importance.

À l'invite du shell, entrez la seule ligne de commande:

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

Le violon sera sauvegardé dans un fichier nommé "fiddle_id.html".


Méthode de navigateur plus longue

Cette méthode télécharge le violon ainsi que ses ressources externes. Les étapes indiquées sont basées sur l'utilisation de Google Chrome. L'utilisation d'autres navigateurs Web devrait également fonctionner, mais ils peuvent utiliser des noms de fichiers différents.

  1. Sélectionnez le menu/lien "Share/Embed" en haut de la page d'édition JSFiddle. Dans la boîte de dialogue qui apparaît, copiez l'URL indiquée dans le champ "Share full screen result". Ce sera sous la forme "http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/" ou "http://jsfiddle.net/<fiddle_id>/embedded/result/".
  2. Ouvrez une nouvelle fenêtre de navigateur et collez l'URL copiée à l'étape précédente. Chargez cette page.
  3. Utilisez la fonction d'enregistrement de votre navigateur pour enregistrer la page et toutes ses ressources sur votre ordinateur local. Par exemple, pour enregistrer toutes les ressources avec Google Chrome, veillez à sélectionner "Webpage, Complete" dans le menu "Format". Assurez-vous de spécifier un nom pour la page. Disons qu'il s'appelle "fiddle.html" pour cet exemple.
  4. Une fois la page enregistrée sur votre ordinateur, vous aurez le fichier "fiddle.html" et un répertoire nommé "fiddle_files". Le fichier "fiddle.html" est la page de wrapper utilisée par JSFiddle pour afficher un en-tête avec un titre "Résultat" et d'autres liens. Il chargera votre violon dans un élément iframe. Pour la plupart, ce fichier peut être ignoré ou même supprimé. Les contenus HTML, JavaScript et CSS de votre violon seront tous enregistrés dans le répertoire "fiddle_files" en tant que fichier unique nommé "saved_resource.html".
  5. Copiez "fiddle_files/saved_resource.html" où vous souhaitez l’utiliser. Si votre violon a inclus des éléments sous "External Resources", ceux-ci apparaîtront également dans le répertoire "fiddle_files". Veillez à copier ces fichiers au même endroit que "saved_resource.html", car le fichier HTML fera référence à ces ressources à l'aide d'URL relatives.

Comme mentionné précédemment, d'autres navigateurs peuvent nommer les fichiers différemment lorsqu'ils sont enregistrés. Par exemple, Firefox nomme le fichier combiné HTML/JS/CSS "fiddle_files/a.html".

10
L S

Toujours pas de fonctionnalité de téléchargement supportée .. MAIS .. vous pouvez utiliser le script jsfiddle-downloader node.

Installation:

npm install jsfiddle-downloader -g

Pour télécharger un violon single à partir de son identifiant:

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

Pour télécharger un violon single à partir de son URL:

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

Pour télécharger tous les scripts d'un 'utilisateur' déterminé à partir de jsFiddle.net:

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

Il téléchargera toutes les sauvegardes dans le répertoire courant, les scripts jsFiddles seront nommés ainsi:

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

Le meilleur moyen est:

  1. Cliquez avec le bouton droit sur le panneau de sortie.
  2. Choisissez la source de l'image de vue, alors tout le code apparaîtra.

Après cela, vous pouvez copier ce code et le coller dans votre ordinateur.

4
ASammour

Vous devez mettre/afficher un après l'URL sur laquelle vous travaillez:

Par exemple:

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

pour l'URL du champ:

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

après cela, sauvegardez le fichier et allez dans le dossier show (ou le nom du fichier que vous avez enregistré) sous ce dossier, vous obtiendrez un fichier html show_resource.HTML. . Bonne chance -------- Ujjwal Gupta 

2
Ujjwal Kumar Gupta

Dans un travail récent, j'ai dû télécharger une liste d'URL de violon et créer un dossier séparé pour chaque violoneux ayant un fichier hsml css js distinct pour chacun, j'ai créé le programme de balayage suivant pour cela . https: // github. com/sguha-work/FiddleCrawler . Il créera un nom de dossier avec une valeur de compteur et chaque dossier aura un fichier html, un fichier css, un fichier js et un fichier de détails. (Le fichier de détails contient les liens des ressources externes).

1
Angshu Guha

J'ai trouvé un article sous le sujet ci-dessus. Là, je pourrais prendre le code complet. Je le mentionnerai.

Voici les étapes mentionnées dans l'article:

  1. Ajoutez embedded/result/à la fin de l'URL JSFiddle que vous voulez récupérer.

  2. Affichez le cadre ou le code source du cadre: cliquez avec le bouton droit de la souris sur n’importe où dans la page et affichez le cadre dans un nouvel onglet ou immédiatement le code source (nécessite Firefox).

  3. Enfin, enregistrez la page dans votre format préféré (MHT, HTML, TXT, etc.) et le tour est joué!

vous pouvez aussi le trouver: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

1
casper

Ok, le moyen le plus simple, j’ai découvert que c’était juste de changer l’url (jsfiddle [point] net) en fiddle [point] jshell [point] net / Il y a un code html clair, sans aucun type d’iframe .. . Exemple: https: // jsfiddle [point] net/mfvmoy64/27/show/light/ -> http: // fiddle [point] jshell [point] net/mfvmoy64/27/show/light/

(Doit changer le '.' 'S en "[point]" à cause du stackeroverflow ...: c) PS: sry 4 bad english

0
lo1c

Vous pouvez télécharger en utilisant ce paquet dans le noeud js,

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

0
MegaCha05

Étape 1: 
Aller à une page de violon comme jsfiddle.net/oskar/v5893p61

Étape 2: 
Ajoutez '/ show' à la fin de l'URL, comme jsfiddle.net/oskar/v5893p61/show 

Étape 3: 
Faites un clic droit sur la page et cliquez sur la source View frame. Vous obtiendrez le code HTML, y compris CSS dans balise et Javascript (js) dans balise. [Un lien source de toutes les bibliothèques sera également ajouté] . Voir capture d'écran

Étape 4: 
Vous pouvez maintenant enregistrer le code source dans un fichier .html.

0
johirpro