【发布时间】：2012-04-08 18:16:26
【问题描述】：
jsFiddle中是否有下载功能，所以你可以在一个文件中下载一个包含CSS、HTML和JS的HTML，这样你就可以在没有jsFiddle的情况下运行它以进行调试？
【问题讨论】：
-
找不到。也许他们稍后会放上去？
-
对于那些寻求如何获取原始源代码的人，请查看@Pradeep Kumar Prabaharan 的回答（不胜感激）
标签： jsfiddle
【发布时间】：2012-04-08 18:16:26
【问题描述】：
好的，我发现了：
您必须在您正在处理的 URL 后面加上 /show a：
http://jsfiddle.net/<your_fiddle_id>/show/
显示结果的网站。
然后当您将其保存为文件时。所有这些都在一个 HTML 文件中。
例如：
http://jsfiddle.net/Ua8Cv/show/
对于网站http://jsfiddle.net/Ua8Cv
【讨论】：
-
在自己的，例如
http://jsfiddle.net/Ua8Cv，如果你只是在地址栏输入额外的/show并回车（后跟浏览器显示源代码快捷方式）以获取源代码. -
我可以在jsfiddle的HTML源代码中看到工具栏中隐藏的按钮
<a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>。它什么也没做，但也许很快就会到来 -
2015年，到
/show后，保存完整页面，然后查看以_files结尾的文件夹，里面应该是一个.html文件，里面有例子的源代码. -
缺少关键步骤。 jsfiddle.net/Ua8Cv/show后选择javascript，选择view frame source，然后保存。不仅仅是页面来源。
旧问题的新答案：
方法一：
第 1 步：您必须将 /show 放在您正在处理的 URL 之后：
http://jsfiddle.net/<fiddle_id>/show/
它显示带有结果标题的输出。
第 2 步：右键单击底部框架并选择查看框架源。而已。你得到了带有在线 JS 链接、CSS 的 html 代码。
保存即可。
例如： http://jsfiddle.net/YRafQ/20/show/ 对于网站http://jsfiddle.net/YRafQ/20/
注意：查看框架源代码而不是查看页面源代码
方法二：
您可以使用此代码：view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/
例如：对于我的 fiddle_id：YRafQ/20
view-source:http://fiddle.jshell.net/YRafQ/20/show/light/
【讨论】：
-
谢谢！第 2 步对我来说一点也不明显。
-
在第 1 步，我们得到一个带有“结果”链接的额外标题 - 对于同一页面和“在 jsfiddle 中编辑”链接。应该右键单击输出（不包括该标题）并选择视图框架源。
-
这是完整的答案，从接受的答案中不清楚
-
@LeosLiterak 我认为您尝试查看方法 1 的页面源代码。它适用于view frame source。使用示例链接进行交叉检查。
-
@LeosLiterak 已更新。并感谢您的提醒，这样现在答案对任何人都会更加清楚。
添加 /show 不会显示纯源代码，它是一个嵌入式工作示例。要在不使用任何其他脚本、css 和 html 的情况下显示它，请使用：
http://fiddle.jshell.net/<fiddle id>/show/light/
【讨论】：
-
你看到了吗？标题中的
Result是什么？ -
也许这曾经有效，但在 2018 年，导航到没有“fiddle.jshell.net”HTTP 引用标头的此类 URL 会将其嵌入 iframe，与 jsfiddle.net/<fiddle id>/show 相同//或jsfiddle.net/<fiddleid>/embedded/result/
-
也许这曾经有效，但在 2020 年，它提供了 404 页面。哎呀。
第 1 步：
转到像jsfiddle.net/oskar/v5893p61这样的小提琴页面
第 2 步：
在网址末尾添加“/show”，例如jsfiddle.net/oskar/v5893p61/show
第 3 步：
右键单击页面并单击查看框架源。您将获得 HTML 代码，包括标签中的 CSS 和标签中的 Javascript (js)。 [还将添加所有库的源链接]。
See screenshot
第 4 步：
现在您可以将源代码保存在 .html 文件中。
【讨论】：
不，JSFiddle 没有下载功能。但是，无论如何要绕过它并保存小提琴的内容并不是很困难。
自从发布接受的答案以来，JSFiddle 已经进行了一些最近的 UI 和后端更改，这些更改会影响 fiddle 的下载方式。请注意以下更新的程序。
简单的命令行方法
此方法仅将小提琴的 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。使用其他网络浏览器也应该可以，但它们可能使用不同的文件名。
- 选择 JSFiddle 编辑页面顶部的“
Share/Embed”菜单/链接。在出现的对话框中，复制“Share full screen result”字段中显示的 URL。格式为“http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/”或“http://jsfiddle.net/<fiddle_id>/embedded/result/”。 - 打开一个新的浏览器窗口并粘贴在上一步中复制的 URL。加载该页面。
- 使用浏览器的保存功能将页面及其所有资源保存到本地计算机。例如，要使用 Google Chrome 保存所有资源，请务必在“
Format”菜单中选择“Webpage, Complete”。请务必指定页面的名称。假设在这个例子中它被命名为“fiddle.html”。 - 页面保存到您的计算机后，您将拥有“
fiddle.html”文件和一个名为“fiddle_files”的目录。文件“fiddle.html”是 JSFiddle 用来显示带有“结果”标题和其他链接的标题的包装页面。它会将您的小提琴加载到 iframe 元素中。在大多数情况下，可以忽略甚至删除此文件。您的小提琴的 HTML、JavaScript 和 CSS 内容都将作为一个名为“saved_resource.html”的文件保存在“fiddle_files”目录中。 - 将“
fiddle_files/saved_resource.html”复制到您想使用的任何位置。如果您的小提琴包含“External Resources”下的项目，这些项目也将出现在“fiddle_files”目录中。请务必将这些文件复制到您将“saved_resource.html”复制到的同一位置，因为 HTML 文件将使用相对 URL 引用这些资源。
如前所述，其他浏览器在保存文件时可能会以不同的方式命名文件。例如，Firefox 将组合的 HTML/JS/CSS 文件命名为“fiddle_files/a.html”。
【讨论】：
仍然不支持下载功能.. 但是.. 你可以使用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>]
它将下载当前目录中的所有备份，jsFiddles脚本将被命名为：
[<output-folder>/]<id-fiddle>.html
【讨论】：
最好的办法是：
- 右键单击输出面板。
- 选择view frame source，就会出现整个代码。
之后，您可以复制该代码，并将其粘贴到您的计算机中。
【讨论】：
你必须在你正在处理的 URL 后面加上 /show：
例如：
"http://jsfiddle.net/rkw79/PagTJ/show/"
对于字段 URL：
"http://jsfiddle.net/rkw79/PagTJ/"
之后保存文件并转到该文件夹下的显示文件夹（或您保存的文件名），您将获得一个 html 文件 show_resource.HTML 。这是您的实际文件。现在在浏览器中打开它并查看源代码。祝你好运--------Ujjwal Gupta
【讨论】：
-
请停止回答已在 2 年前以高票数回答的问题。这对任何人都没有好处。
在最近的一项工作中，我必须下载小提琴 url 列表并为每个小提琴创建单独的文件夹，每个小提琴都有单独的 html css js 文件，我为此创建了以下爬虫程序。 https://github.com/sguha-work/FiddleCrawler .它将创建带有计数器值的文件夹名称，每个文件夹将有一个html、一个css、一个js和一个详细信息文件。 （详细信息文件将保存外部资源的链接）。
【讨论】：
我在上面的主题下找到了一篇文章。在那里我可以获取完整的代码。我会提到它。
以下是文章中提到的步骤：
在您要抓取的 JSFiddle URL 的末尾添加 embedded/result/。
显示框架或框架的源代码：右键单击页面中的任意位置并立即在新选项卡中查看框架或源代码 （需要 Firefox）。
最后，以您喜欢的格式（MHT、HTML、TXT 等）保存页面，瞧！
你也可以找到它：https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/
【讨论】：
可以在node js中使用这个包下载，
【讨论】：
没有一种合适的方法可以从 JSFiddle 下载所有内容，但是有一种 hack 方法可以做到这一点。 只需在 JSFiddle URL 的末尾添加“embedded/”或“embedded/result/”即可！然后您可以将整个页面保存为 HTML 文件 + 外部库（如果需要）。
【讨论】：
好吧，最简单的方法，我发现只是将 url (jsfiddle[dot]net) 更改为 fiddle[dot]jshell[dot]net/ 你有一个清晰的 html 代码，没有任何类型的 iframe... 例子： https://jsfiddle[dot]net/mfvmoy64/27/show/light/ -> http://fiddle[dot]jshell[dot]net/mfvmoy64/27/show/light/
(由于 stackeroverflow 必须将 '.' 更改为 "[dot]" ... :c) PS: sry 4 英语不好
【讨论】：
如果您想将所有小提琴下载到离线文件夹，可以使用以下脚本：
【讨论】：
有 npm-package jsfiddle-downloader.
【讨论】：
使用http://jsfiddle.net//show/light/
然后只需使用浏览器的检查元素功能。您将在 iframe 选项卡中获得代码。 .在 chrome 中，只需右键单击并单击编辑为 html 选项卡。并复制html内容。那是你的实际代码。
【讨论】：
Ctrl + S，保存整个小提琴，文件夹里面有你要找的干净页面
【讨论】：
-
那些说明太模糊了。