JsFiddle 中有下载功能吗？

在 jsFiddle 中是否有一个下载函数，这样您就可以下载一个包含 CSS、 HTML 和 JS 的 HTML 文件，这样您就可以在没有 jsFiddle 的情况下运行它来进行调试？

144914 次浏览
小开
最佳答案

好吧，我发现:

你必须在你正在处理的网址后面加上 /show a:
Http://jsfiddle.net/<your_fiddle_id>/show/
这是显示结果的网站。

然后当您将其保存为一个文件时，它将全部保存在一个 HTML 文件中。

例如:
Http://jsfiddle.net/ua8cv/show/
网站的 http://jsfiddle.net/ua8cv

小开

你必须在你正在处理的 URL 后面加上/显示一个:

例如:

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

字段网址:

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

在保存文件之后，进入该文件夹下的 show 文件夹(或者你保存的文件名) ，你会得到一个 html 文件 show _ resource. HTML。现在在浏览器中打开它并查看源代码。祝你好运———— Ujjwal Gupta

小开

添加/show 并不提供纯源代码，而是一个嵌入式工作示例。要在不使用任何附加脚本、 css 和 html 的情况下显示它，请使用:

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

举个例子: Http://fiddle.jshell.net/ua8cv/show/light/

小开

Ctrl + 是的，保存整个小提琴，在文件夹中有一个干净的页面，你正在寻找

小开

在最近的一项工作中，我不得不下载一个小提琴地址列表，并为每个小提琴创建单独的文件夹，每个小提琴都有单独的 html css js 文件，我已经为此创建了以下爬虫程序。 Https://github.com/sguha-work/fiddlecrawler .它将创建具有计数器值的文件夹名称，每个文件夹将有一个 html、一个 css、一个 js 和一个详细信息文件。(详细信息文件将保存外部资源的链接)。

小开

老问题的新答案:

方法一:

步骤1 : 你必须把 /show放在你正在处理的 URL之后:

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

它显示带有结果头的输出。

步骤2 : 右击底部框架并选择 查看帧源。就是这样。你得到了带有在线 JS 链接的 html 代码，CSS。

省省吧。

例如: Http://jsfiddle.net/yrafq/20/show/ 对于这个网站来说，我们的 http://jsfiddle.net/yrafq/20/是:

注意: 查看帧源而不是 查看网页源代码

方法二:

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

例如: For my fiddle _ id: YRafQ/20

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

使用 http://jsfiddle.net//show/light/

然后使用浏览器的检查元素功能。您将在 iframe 选项卡中获得代码。.在 chrome 中右键单击并单击编辑为 html 标签。并复制 html 内容。这就是你的真实代码。

小开

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”的文件中。

较长的浏览器方法

此方法下载小提琴及其外部资源。给出的步骤是基于使用谷歌浏览器。使用其他网页浏览器应该也可以，但他们可能使用不同的文件名。

  1. 选择 JSFiddle 编辑页面顶部的“ Share/Embed”菜单/链接。在出现的对话框中，复制“ Share full screen result”字段中显示的 URL。它将采用“ http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/”或“ http://jsfiddle.net/<fiddle_id>/embedded/result/”的形式。
  2. 打开一个新的浏览器窗口并粘贴上一步骤中复制的 URL。
  3. 使用浏览器的保存功能将页面及其所有资源保存到本地计算机。例如，要使用 GoogleChrome 保存所有资源，请确保在“ Format”菜单中选择“ Webpage, Complete”。确保为页指定名称。我们假设这个示例的名称是“ fiddle.html”。
  4. 页面保存到您的计算机后，您将拥有“ fiddle.html”文件和一个名为“ fiddle_files”的目录。文件“ fiddle.html”是 JSFiddle 用来显示带有“ Result”标题和其他链接的标题的包装页。它将在一个 iframe 元素中加载小提琴。在大多数情况下，可以忽略甚至删除此文件。小提琴的 HTML、 JavaScript 和 CSS 内容都将作为一个名为“ saved_resource.html”的文件保存在“ fiddle_files”目录中。
  5. 将“ 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

下载 单提琴:

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>]

它将下载当前目录中的所有备份，jsFiddle 脚本将被命名为:

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

好的，最简单的方法是将 url (jsfiddle [ dot ] net)改为 fiddle [ dot ] jshell [ dot ] net/ 这里有一个清晰的 html 代码，没有任何 iframe..。 例如: Https://jsfiddle /mfvmoy64/27/show/light/-> < a href = “ http://fiddle [ dot ] jshell [ dot ] net/mfvmoy64/27/show/light/”rel = “ nofollow”> http://fiddle [ dot ] jshell [ dot ] net/mfvmoy64/27/show/light/

(必须将’. “ s 改为”[ dot ]“ ，因为堆栈溢出... : c) 附言: 对不起，英语不好

小开

我找到了一篇关于上述主题的文章。在那里我可以拿到完整的代码。我会提的。

以下是文章中提到的步骤:

  1. 在想要抓取的 JSFiddle URL 的末尾添加嵌入式/result/。

  2. 显示框架或框架的源代码: 右键单击页面中的任何位置，然后立即在新的选项卡或源代码中查看框架 (需要 Firefox)

  3. 最后，以您喜欢的格式(MHT、 HTML、 TXT 等)保存页面，瞧！

你也可以找到它: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

小开

最好的办法是:

  1. 右键单击输出面板。
  2. 选择视图框架源，然后整个代码将出现。

之后，你可以复制代码，并粘贴到您的计算机。

小开

您可以在 node js 中使用这个包下载,

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

小开

第一步:
转到像 jsfiddle.net/oskar/v5893p61这样的小提琴页面

第二步:
在 URL 的末尾添加“/show”，如 jsfiddle.net/oskar/v5893p61/show

第三步:
右键单击页面，然后单击 查看帧源。您将获得 HTML 代码，包括标记中的 CSS 和标记中的 Javascript (js)。[也将添加所有库的源代码链接]。 见截图

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

小开

有 npm-包 jsfiddle-downloader。

小开

从 JSFiddle 下载所有的东西并没有这样一种合适的方法，但是有一种黑客的方法可以做到这一点。 只需在 JSFiddle URL 的末尾添加“嵌入/”或“嵌入/结果/”即可！，然后您可以将整个页面保存为 HTML 文件 + 外部库(如果您愿意)。

小开

如果你想把你所有的小提琴下载到一个离线文件夹中，有一个脚本可用:

Https://github.com/isonno/downloadjsf

小开

尝试将代码复制粘贴到 WebDen中，然后从 WebDen下载。唯一的缺点是它只支持纯 JS、 html 和 css，因此任何其他代码都可能需要通过其他方式下载。


提交答案