web-dev-qa-db-ja.com

jsFiddleにダウンロード機能はありますか？

JsFiddleにダウンロード機能があるので、CSS、HTML、JSを1つのファイルに入れてHTMLをダウンロードできるので、デバッグ目的でjsFiddleなしで実行できますか？

jsfiddle
160
JustGoscha

わかった：

作業中のURLの後に/show aを追加する必要があります。
http://jsfiddle.net/ <your_fiddle_id>/show /
結果を表示するのはサイトです。

そして、ファイルとして保存するとき。すべて1つのHTMLファイルに含まれています。

例えば：
http://jsfiddle.net/Ua8Cv/show/
サイト用 http://jsfiddle.net/Ua8Cv

243
JustGoscha

古い質問に対する新しい答え：

方法1：

ステップ1：作業中のURLの後に/showを配置する必要があります。

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/
79
Pradeep Kumar Prabaharan

/ showを追加しても、純粋なソースコードは表示されません。これは組み込みの動作例です。追加のスクリプト（cssおよびhtml）なしで表示するには、次を使用します。

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

例： http://fiddle.jshell.net/Ua8Cv/show/light/

15
Suprido

いいえ、JSFiddleにはダウンロード機能がありません。ただし、それを回避し、とにかくフィドルの内容を保存することはそれほど難しくありません。

受け入れられた回答が投稿されて以来、JSFiddleは、フィドルのダウンロード方法に影響を与える最近のUIとバックエンドの変更を行いました。以下の更新された手順に注意してください。

簡単なコマンドライン方式

このメソッドは、フィドルのHTML、JavaScript、およびCSSを1つのファイルとしてのみダウンロードします。フィドルの外部リソースは保存されません。

以下に示すコマンドラインでは、fiddle_idはフィドルのID番号を指します。 URLが「http://jsfiddle.net/<fiddle_user>/<fiddle_id>」または「http://jsfiddle.net/<fiddle_id>」のフィドルの場合は、fiddle_idのみが必要です。 fiddle_userは重要ではありません。

シェルプロンプトで、単一のコマンドラインを入力します。

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. 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. ブラウザの保存機能を使用して、ページとそのすべてのリソースをローカルコンピューターに保存します。たとえば、Google Chromeを使用してすべてのリソースを保存するには、「Format」メニューで「Webpage, Complete」を選択してください。必ずページの名前を指定してください。この例では、「fiddle.html」という名前だとしましょう。
  4. ページをコンピューターに保存すると、「fiddle.html」ファイルと「fiddle_files」という名前のディレクトリが作成されます。ファイル「fiddle.html」は、JSFiddleが「結果」タイトルとその他のリンクを含むヘッダーを表示するために使用するラッパーページです。 iframe要素にフィドルをロードします。ほとんどの場合、このファイルは無視することも、削除することもできます。フィドルのHTML、JavaScript、およびCSSコンテンツはすべて、「fiddle_files」という名前の単一ファイルとして「saved_resource.html」ディレクトリに保存されます。
  5. 「fiddle_files/saved_resource.html」を使用したい場所にコピーします。フィドルに「External Resources」の下にアイテムが含まれている場合、それらは「fiddle_files」ディレクトリにも表示されます。 HTMLファイルは相対URLを使用してこれらのリソースを参照するため、これらのファイルを「saved_resource.html」をコピーした場所と同じ場所に必ずコピーしてください。

前述のように、他のブラウザでは、保存時にファイルに異なる名前を付ける場合があります。たとえば、FirefoxはHTML/JS/CSSを結合したファイルに「fiddle_files/a.html」という名前を付けます。

10
L S

ダウンロード機能はまだサポートされていません。しかし、. jsfiddle-downloader nodeスクリプトを使用できます。

インストール：

npm install jsfiddle-downloader -g

idからのシングルフィドルをダウンロードするには：

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

そのURLから1つのフィドルをダウンロードするには：

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
7
Facundo Victor

最善の方法は次のとおりです。

  1. 出力パネルを右クリックします。
  2. フレームソースの表示を選択すると、コード全体が表示されます。

その後、そのコードをコピーして、コンピューターに貼り付けることができます。

4
ASammour

ステップ1：
jsfiddle.net/oskar/v5893p61のようなフィドルページに移動します

ステップ2：
jsfiddle.net/oskar/v5893p61/showのように、URLの最後に「/ show」を追加します

ステップ3：
ページを右クリックし、フレームソースの表示をクリックします。タグにCSS、タグにJavascript（js）を含むHTMLコードを取得します。 [すべてのライブラリのソースリンクも追加されます]。 スクリーンショットを見る

ステップ4：
これで、ソースコードを.htmlファイルに保存できます。

3
johirpro

作業中のURLの後に/ show aを追加する必要があります。

例えば：

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

フィールドURLの場合：

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

その後、ファイルを保存し、そのフォルダーの下のショーフォルダー（または保存したファイル名）に移動します実際のファイルであるshow_resource.HTMLというhtmlファイルを取得しますブラウザで開いてソースコードを表示します。幸運を祈る--------ウジワル・グプタ

2
Ujjwal Kumar Gupta

最近の仕事では、フィドルのURLのリストをダウンロードし、各フィドルごとに個別のhtml css jsファイルを持つ個別のフォルダーを作成する必要がありました。このために、次のクローラープログラムを作成しました。 https://github.com/sguha-work/FiddleCrawler .counter値でフォルダー名を作成し、各フォルダーにはhtml、css、js、および詳細ファイルがあります。 （詳細ファイルには、外部リソースのリンクが保持されます）。

1
Angshu Guha

上記のトピックの下で記事を見つけました。そこで、私は完全なコードを取ることができました。それについて言及します。

記事に記載されている手順は次のとおりです。

  1. 取得したいJSFiddle URLの最後にembedded/result /を追加します。

  2. フレームまたはフレームのソースコードを表示します。ページ内の任意の場所を右クリックし、新しいタブまたはソースでフレームをすぐに表示します（Firefoxが必要です）。

  3. 最後に、好みの形式（MHT、HTML、TXTなど）でページを保存してください。

また、それを見つけることができます： https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

1
casper

さて、最も簡単な方法は、URL（jsfiddle [dot] net）をfiddle [dot] jshell [dot] net /に変更することだけでした。iframeのない明確なhtmlコードがあります。例： https：// jsfiddle [dot] net/mfvmoy64/27/show/light / -> http：// fiddle [dot] jshell [dot] net/mfvmoy64/27/show/light /

（stackeroverflow ...のために「。」を「[dot]」に変更する必要があります...：c）PS：sry 4 bad english

0
lo1c

このパッケージを使用して、ノードjsでダウンロードできます。

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

0
MegaCha05