jsFiddle中是否有下载功能，因此您可以将具有CSS，HTML和JS的HTML下载到一个文件中，这样您就可以在没有jsFiddle的情况下运行它以进行调试？
问问题
139908 次
17 回答
269
好的，我发现：
您必须/show在您正在处理的 URL 之后放置一个：http:
//jsfiddle.net/
<your_fiddle_id>/show / 这是显示结果的站点。
然后当您将其保存为文件时。这一切都在一个 HTML 文件中。
例如： http:
//jsfiddle.net/Ua8Cv/show/
用于站点 http://jsfiddle.net/Ua8Cv
于 2012-03-26T09:51:13.983 回答
92
旧问题的新答案：
方法一：
第 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/
于 2015-04-19T05:30:29.817 回答
14
添加 /show 不提供纯源代码，它是一个嵌入式工作示例。要在没有任何附加脚本、css 和 html 的情况下显示它，请使用：
http://fiddle.jshell.net/<fiddle id>/show/light/
一个例子： http: //fiddle.jshell.net/Ua8Cv/show/light/
于 2015-01-02T14:18:14.603 回答
13
第 1 步：
转到一个小提琴页面，例如jsfiddle.net/oskar/v5893p61
第 2 步：
在 URL 末尾添加“/show”，例如jsfiddle.net/oskar/v5893p61/show
第 3 步：
右键单击页面，然后单击View frame source。您将获得 HTML 代码，包括标签中的 CSS 和标签中的 Javascript (js)。[还将添加所有库的源链接]。
看截图
第 4 步：
现在您可以将源代码保存在 .html 文件中。
于 2018-12-03T13:56:58.103 回答
12
不，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。使用其他网络浏览器也应该可以，但它们可能使用不同的文件名。
- 选择
Share/EmbedJSFiddle 编辑页面顶部的“”菜单/链接。在出现的对话框中，复制“Share full screen result”字段中显示的 URL。它将是“http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/”或“http://jsfiddle.net/<fiddle_id>/embedded/result/”的形式。 - 打开一个新的浏览器窗口并粘贴在上一步中复制的 URL。加载该页面。
- 使用浏览器的保存功能将页面及其所有资源保存到本地计算机。例如，要使用 Google Chrome 保存所有资源，请务必
Webpage, Complete在“Format”菜单中选择“ ”。请务必指定页面的名称。假设fiddle.html在这个例子中它被命名为“”。 - 页面保存到您的计算机后，您将拥有“
fiddle.html”文件和一个名为“fiddle_files”的目录。文件“fiddle.html”是 JSFiddle 用来显示带有“结果”标题和其他链接的标题的包装页。它会将您的小提琴加载到 iframe 元素中。在大多数情况下，可以忽略甚至删除此文件。您的小提琴的 HTML、JavaScript 和 CSS 内容都将fiddle_files作为一个名为“saved_resource.html”的文件保存在“”目录中。 - 将“
fiddle_files/saved_resource.html”复制到您想使用它的任何地方。如果您的小提琴包含“External Resources”下的项目，这些项目也将出现在“fiddle_files”目录中。请务必将这些文件复制到您复制“saved_resource.html”的同一位置，因为 HTML 文件将使用相对 URL 引用这些资源。
如前所述，其他浏览器在保存文件时可能会以不同的方式命名文件。例如，Firefox 将组合的 HTML/JS/CSS 文件命名为“ fiddle_files/a.html”。
于 2015-12-16T15:42:21.587 回答
7
仍然不支持下载功能..但是..您可以使用jsfiddle-downloader节点脚本。
安装：
npm install jsfiddle-downloader -g
从它的 id下载一个小提琴：
jsfiddle-downloader -i <fiddle-id> [-o <output file>]
从它的 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
要从jsFiddle.net下载确定的“用户”的所有脚本：
jsfiddle-downloader -u <user> [-o <output file>]
它将下载当前目录中的所有备份，jsFiddles 脚本将被命名为：
[<output-folder>/]<id-fiddle>.html
于 2016-05-18T03:31:57.477 回答
4
最好的方法是：
- 右键单击输出面板。
- 选择视图框架源，然后整个代码将出现。
之后，您可以复制该代码，并将其粘贴到您的计算机中。
于 2017-03-07T08:11:56.690 回答
2
您必须在您正在处理的 URL 之后放置 /show a：
例如：
"http://jsfiddle.net/rkw79/PagTJ/show/"
对于字段 URL：
"http://jsfiddle.net/rkw79/PagTJ/"
之后保存文件并转到该文件夹下的显示文件夹（或您保存的文件名），您将获得一个 html 文件 show_resource.HTML 。这是您的实际文件。现在在浏览器中打开它并查看源代码. 祝你好运--------Ujjwal Gupta
于 2014-12-25T06:38:10.273 回答
2
在最近的一项工作中，我必须下载小提琴 url 列表并为每个小提琴创建单独的文件夹，每个小提琴都有单独的 html css js 文件，我为此创建了以下爬虫程序。 https://github.com/sguha-work/FiddleCrawler 。它将创建具有计数器值的文件夹名称，每个文件夹将有一个 html、一个 css、一个 js 和一个详细信息文件。（详细信息文件将保存外部资源的链接）。
于 2015-03-18T12:05:48.850 回答
1
我在上述主题下找到了一篇文章。在那里我可以获取完整的代码。我会提到它。
以下是文章中提到的步骤：
在您想要获取的 JSFiddle URL 的末尾添加嵌入式/结果/。
显示框架或框架的源代码：右键单击页面中的任意位置并立即在新选项卡或源中查看框架（需要 Firefox）。
最后，以您喜欢的格式（MHT、HTML、TXT 等）保存页面，瞧！
你也可以找到它：https ://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/
于 2016-10-11T05:17:03.390 回答
1
没有一种合适的方法可以从 JSFiddle 下载所有东西，但是有一种 hack 方法可以做到这一点。只需在 JSFiddle URL 的末尾添加“embedded/”或“embedded/result/”！然后您可以将整个页面保存为 HTML 文件 + 外部库（如果需要）。
于 2020-01-25T18:02:33.420 回答
1
您可以在 node js 中使用此包下载，
于 2018-04-29T13:50:53.397 回答
0
好的，最简单的方法，我发现只是将 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 英语不好
于 2016-07-09T05:43:00.243 回答
0
如果您想将所有小提琴下载到离线文件夹，可以使用以下脚本：
于 2021-07-29T18:33:20.997 回答
-1
有 npm-package jsfiddle-downloader。
于 2019-04-04T16:52:48.980 回答
-2
使用http://jsfiddle.net/ /show/light/
然后只需使用浏览器的检查元素功能。您将在 iframe 选项卡中获得代码。. 在 chrome 中，只需右键单击并单击编辑为 html 选项卡。并复制html内容。那是您的实际代码。
于 2015-05-21T11:38:23.847 回答
-4
Ctrl+ S，保存整个小提琴，在文件夹中有你正在寻找的干净页面
于 2015-03-12T22:15:36.657 回答