¿Hay una función de descarga en jsFiddle?


174

¿Existe una función de descarga en jsFiddle, por lo que puede descargar un HTML con CSS, HTML y JS en un solo archivo, para que pueda ejecutarlo sin jsFiddle para fines de depuración?


No puedo encontrar uno. tal vez lo pondrán después?
Chetter Hummin

1
Para aquellos que buscan cómo obtener el código fuente sin procesar, consulte la respuesta de @Pradeep Kumar Prabaharan (es poco apreciada)
zelusp

Respuestas:


261

Ok me enteré:

Debe poner /showun después de la URL en la que está trabajando:
http://jsfiddle.net/<your_fiddle_id>/show/
Es el sitio que muestra los resultados.

Y luego cuando lo guardas como un archivo. Todo está en un archivo HTML.

Por ejemplo:
http://jsfiddle.net/Ua8Cv/show/
para el sitio http://jsfiddle.net/Ua8Cv


1
Aquí está la página de problemas para esta característica github.com/jsfiddle/jsfiddle-docs-alpha/issues/156
Larry Battle

55
En el propio, por ejemplo, http://jsfiddle.net/Ua8Cvsi solo escribe el extra /showen la barra de direcciones y presiona enter (seguido del acceso directo del código fuente del navegador) para obtener la fuente.
heltonbiker

1
Puedo ver en el código fuente HTML de jsfiddle un botón oculto en la barra de herramientas <a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>. No hace nada, pero tal vez venga pronto
corbacho

44
En 2015, después de ir a /show, guarde la página completa, luego busque en la carpeta que termina _files, dentro debe haber un .htmlarchivo con el código fuente del ejemplo.
Castro Roy

11
Paso crucial que falta. Después de jsfiddle.net/Ua8Cv/show, seleccione javascript, elija ver fuente de marco y luego guarde. No solo la fuente de la página.
Eric Bridger el

87

Nueva respuesta a una vieja pregunta:

Método 1:

Paso 1 : Tienes que poner /showdespués de lo URLque estás trabajando:

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

Muestra la salida con un encabezado de resultado.

Paso 2 : haga clic con el botón derecho en el marco inferior y seleccione Ver origen del marco . Eso es. Obtuviste el código html con enlaces JS en línea, CSS.

Solo guárdalo.

Por ejemplo: http://jsfiddle.net/YRafQ/20/show/ para el sitio http://jsfiddle.net/YRafQ/20/

Nota: Ver fuente de marco y no ver fuente de página

Método 2:

Puedes usar este código: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Por ejemplo: para mi fiddle_id: YRafQ/20

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

2
¡Gracias! El paso 2 no fue del todo obvio para mí.
Chris Prince

en el paso 1 obtenemos un encabezado adicional con el enlace "Resultado" -para la misma página y el enlace "editar en jsfiddle" ... debería hacer clic derecho en la salida (excluyendo ese encabezado) y seleccionar ver la fuente del marco ...
Pradeep Kumar Prabaharan

3
Esta es la respuesta completa, no está clara en la respuesta aceptada
Eric Bridger

@LeosLiterak Creo que intentaste ver la fuente de la página para el método1. Funciona para ver el origen del marco . Verificación cruzada con el enlace de ejemplo.
Pradeep Kumar Prabaharan

@LeosLiterak actualizado. y gracias por recordarlo para que ahora la respuesta sea más clara para cualquiera.
Pradeep Kumar Prabaharan

15

Agregar / show no presenta un código fuente puro, es un ejemplo de trabajo incrustado. Para mostrarlo sin scripts adicionales, css y html, use:

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

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


¿Has visto eso? ¿Cuál es el Resulten el encabezado?
Little Alien

1
Quizás esto funcionó una vez, pero en 2018, navegar a dicha URL sin un encabezado de referencia HTTP "fiddle.jshell.net" lo integra en un iframe, igual que jsfiddle.net/<fiddle id> / show / o jsfiddle.net / <fiddle id> / embedded / result /
Jacob C. dice Reinstate Monica

10

No, JSFiddle no tiene una función de descarga. Sin embargo, no es muy difícil evitar eso y guardar el contenido de un violín de todos modos.

Desde el momento en que se publicó la respuesta aceptada, JSFiddle ha realizado algunos cambios recientes en la interfaz de usuario y el backend que afectan la forma en que se debe descargar un violín. Tenga en cuenta los procedimientos actualizados a continuación.


Método de línea de comando simple

Este método solo descarga HTML, JavaScript y CSS del violín como un solo archivo. Los recursos externos del violín no se guardan.

En la línea de comando que se muestra a continuación, se fiddle_idrefiere al número de identificación del violín. Para un violín con la URL " http://jsfiddle.net/<fiddle_user>/<fiddle_id>" o " http://jsfiddle.net/<fiddle_id>", solo fiddle_idse necesita la. El fiddle_userno es importante.

En el indicador de comandos, ingrese la línea de comando única

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

El violín se guardará en un archivo llamado " fiddle_id.html".


Método de navegador más largo

Este método descarga el violín y sus recursos externos. Los pasos dados se basan en el uso de Google Chrome. El uso de otros navegadores web también debería funcionar, pero pueden usar diferentes nombres de archivo.

  1. Seleccione el " Share/Embed" menú / enlace en la parte superior de la página de edición JSFiddle. En el cuadro de diálogo que aparece, copie la URL que se muestra en el Share full screen resultcampo " ". Será de la forma " http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/" o " http://jsfiddle.net/<fiddle_id>/embedded/result/".
  2. Abra una nueva ventana del navegador y pegue la URL copiada en el paso anterior. Cargue esa página.
  3. Use la función de guardar de su navegador para guardar la página y todos sus recursos en su computadora local. Para guardar todos los recursos con Google Chrome, por ejemplo, asegúrese de seleccionar " Webpage, Complete" en el Formatmenú " ". Asegúrese de especificar un nombre para la página. Digamos que se llama " fiddle.html" para este ejemplo.
  4. Después de guardar la página en su computadora, tendrá el " fiddle.html" archivo y un directorio llamado " fiddle_files". El archivo " fiddle.html" es la página de contenedor que JSFiddle utiliza para mostrar un encabezado con un título de "Resultado" y otros enlaces. Cargará tu violín en un elemento iframe. En su mayor parte, este archivo puede ignorarse o incluso eliminarse. El contenido HTML, JavaScript y CSS de su violín se guardará en el " fiddle_files" directorio como un único archivo llamado " saved_resource.html".
  5. Copie " fiddle_files/saved_resource.html" a donde quiera usarlo. Si su violín incluía elementos en " External Resources", también aparecerán en el fiddle_filesdirectorio " ". Asegúrese de copiar esos archivos en el mismo lugar en el que copió " saved_resource.html", porque el archivo HTML se referirá a esos recursos usando URLs relativas.

Como se mencionó anteriormente, otros navegadores pueden nombrar los archivos de manera diferente cuando se guardan. Por ejemplo, Firefox nombra el archivo combinado HTML / JS / CSS " fiddle_files/a.html".


7

Todavía no se admite la funcionalidad de descarga ... PERO ... puede usar el script de nodo jsfiddle-downloader .

Instalación :

npm install jsfiddle-downloader -g

Para descargar un solo violín desde su id :

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

Para descargar un solo violín de su 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

Para descargar todos los scripts de un 'usuario' determinado de jsFiddle.net:

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

Descargará todas las copias de seguridad en el directorio actual, los scripts jsFiddles se nombrarán como:

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

5

Paso 1:
ve a una página de violín comojsfiddle.net/oskar/v5893p61

Paso 2:
Agregue '/ show' al final de la URL, comojsfiddle.net/oskar/v5893p61/show

Paso 3:
haga clic derecho en la página y haga clic en Ver origen de cuadro . Obtendrá el código HTML que incluye CSS en la etiqueta y Javascript (js) en la etiqueta. [También se agregará el enlace fuente de toda la biblioteca]. Ver captura de pantalla

Paso 4:
ahora puede guardar el código fuente en un archivo .html.


4

La mejor manera es:

  1. Haga clic derecho en el panel de salida.
  2. Elija ver el origen del marco, luego aparecerá el código completo.

Después de eso, puede copiar ese código y pegarlo en su computadora.


2

En un trabajo reciente, tuve que descargar una lista de URL de violín y crear una carpeta separada para cada violín que tiene un archivo html css js separado para cada uno, he creado el siguiente programa de rastreador para esto. https://github.com/sguha-work/FiddleCrawler . Creará el nombre de la carpeta con valor de contador y cada carpeta tendrá un html, un css, un js y un archivo de detalles. (El archivo de detalles contendrá los enlaces de recursos externos).


1

Encontré un artículo sobre el tema anterior. Allí podría tomar el código completo. Lo mencionaré.

Estos son los pasos mencionados en el artículo:

  1. Agregue incrustado / resultado / al final de la URL JSFiddle que desea obtener.

  2. Muestre el marco o el código fuente del marco: haga clic con el botón derecho en cualquier lugar de la página y vea el marco en una nueva pestaña o el origen de inmediato (requiere Firefox).

  3. Finalmente, guarde la página en su formato preferido (MHT, HTML, TXT, etc.) y ¡listo!

también lo puedes encontrar: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/



0

Tienes que poner / mostrar un después de la URL en la que estás trabajando:

Por ejemplo:

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

para URL de campo:

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

después de eso guarde el archivo y vaya a la carpeta show (o el nombre del archivo con el que ha guardado) debajo de esa carpeta obtendrá un archivo html show_resource.HTML. ese es su archivo real. ahora ábralo en el navegador y vea el código fuente . Mucha suerte -------- Ujjwal Gupta


Deje de responder preguntas que se han resuelto hace más de 2 años con una respuesta altamente votada Esto no proporciona ningún beneficio a nadie.
rayryeng


0

No hay una manera tan adecuada de descargar todas las cosas juntas de JSFiddle, pero hay una forma de hackear para hacer eso. Simplemente agregue "incrustado /" o "incrustado / resultado /" al final de su URL de JSFiddle !, y luego puede guardar toda la página como un archivo HTML + las bibliotecas externas (si lo desea).



-2

Utilice http://jsfiddle.net/ / show / light /

entonces solo use la función de inspección del elemento del navegador. obtendrá el código en la pestaña iframe. . en Chrome solo haga clic derecho y haga clic en editar como pestaña html. y copie el contenido html. Ese es tu código real.


-3

Ctrl+ S, guarda todo el violín, dentro de la carpeta de archivos está la página limpia que estás buscando


Esas instrucciones son demasiado vagas.
LS
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.