jsFiddle中有下载功能吗？

Question

在jsFiddle中是否有下载功能,因此您可以在一个文件中下载带有CSS,HTML和JS的HTML,这样您就可以在没有jsFiddle的情况下运行它以进行调试？

Answer 1

好的我发现了:

您必须/show在您正在处理的URL之后添加:
http ://jsfiddle.net/<your_fiddle_id>
/show/这是显示结果的网站.

然后当您将其保存为文件时.它都在一个HTML文件中.

例如:
http ://jsfiddle.net/Ua8Cv/show/
为网站 http://jsfiddle.net/Ua8Cv

Answer 2

旧问题的新答案:

方法1:

第1步:你必须/show在URL你正在努力之后:

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

它显示带有结果标题的输出.

第2步:右键单击底部框架,然后选择" 查看框架源".而已.你有在线JS链接,CSS的HTML代码.

只需保存它.

例如:http: //jsfiddle.net/YRafQ/20/show/ 为网站http://jsfiddle.net/YRafQ/20/

注意:查看框架源而不是查看页面源

方法2:

您可以使用此代码: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

例如:对于我的fiddle_id: YRafQ/20

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

Answer 3

添加/显示不提供纯源代码,它是一个嵌入式工作示例.要在没有任何其他脚本,css和html的情况下显示它,请使用:

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

一个例子:http: //fiddle.jshell.net/Ua8Cv/show/light/

Answer 4

第 1 步：
转到类似的小提琴页面jsfiddle.net/oskar/v5893p61

第 2 步：
在 URL 末尾添加“/show”，例如jsfiddle.net/oskar/v5893p61/show

第 3 步：
在页面上单击鼠标右键，然后单击View frame source。您将获得 HTML 代码，包括标记中的 CSS 和标记中的 Javascript (js)。[还将添加所有库的源链接]。 看截图

第 4 步：
现在您可以将源代码保存在 .html 文件中。

Answer 5

不,JSFiddle没有下载功能.然而,要解决这个问题并保存小提琴的内容并不是很困难.

自从接受的答案被发布以来,JSFiddle已经做出了一些最近的UI和后端更改,这些更改会影响应该下载小提琴的方式.请注意下面的更新程序.

简单的命令行方法

此方法仅将小提琴的HTML,JavaScript和CSS作为单个文件下载.小提琴的外部资源不会被保存.

在下面显示的命令行中,fiddle_id指的是小提琴的ID号.对于小提示URL" http://jsfiddle.net/<fiddle_user>/<fiddle_id>"或" http://jsfiddle.net/<fiddle_id>",只fiddle_id需要.这fiddle_user不重要.

在shell提示符下,输入单个命令行:

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

小提琴将保存到名为" fiddle_id.html" 的文件中.

更长的浏览器方法

此方法下载小提琴及其外部资源.给出的步骤基于使用Google Chrome.使用其他Web浏览器也应该可以,但是它们可能使用不同的文件名.

1. 选择Share/EmbedJSFiddle编辑页面顶部的" "菜单/链接.在出现的对话框中,复制" Share full screen result"字段中显示的URL .它的形式为" http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/"或" http://jsfiddle.net/<fiddle_id>/embedded/result/".
2. 打开一个新的浏览器窗口并粘贴上一步中复制的URL.加载该页面.
3. 使用浏览器的保存功能将页面及其所有资源保存到本地计算机.例如,要使用Google Chrome保存所有资源,请务必Webpage, Complete在" Format"菜单中选择" " .请务必指定页面的名称.让我们说fiddle.html这个例子的名字是" ".
4. 将页面保存到您的计算机后,您将拥有" fiddle.html"文件和名为" fiddle_files" 的目录.文件" fiddle.html"是JSFiddle用于显示带有"Result"标题和其他链接的标题的包装页面.它会将你的小提琴加载到iframe元素中.在大多数情况下,可以忽略甚至删除此文件.您的小提琴的HTML,JavaScript和CSS内容都将fiddle_files作为名为" saved_resource.html" 的单个文件保存在" "目录中.
5. 将" fiddle_files/saved_resource.html" 复制到您想要使用它的任何位置.如果你的小提琴包括" External Resources" 下的项目,那些也将出现在" fiddle_files"目录中.请务必将这些文件复制到您复制" saved_resource.html" 的相同位置,因为HTML文件将使用相对URL引用这些资源.

如前所述,其他浏览器在保存文件时可能会以不同方式命名文件.例如,Firefox命名组合的HTML/JS/CSS文件" fiddle_files/a.html".

Answer 6

仍然没有支持下载功能..但是..你可以使用jsfiddle-downloader节点脚本.

安装:

npm install jsfiddle-downloader -g

从其id下载单个小提琴:

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

从其网址下载单个小提琴:

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

要从jsFiddle.net 下载确定的'用户'的所有脚本:

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

它将下载currrent目录中的所有备份,jsFiddles脚本将命名为:

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

Answer 7

最好的办法是：

1. 右键单击输出面板。
2. 选择查看框架源，然后就会出现整个代码。

之后，您可以复制该代码并将其粘贴到您的计算机中。