क्या jsFiddle में एक डाउनलोड फ़ंक्शन है?


174

क्या jsFiddle में एक डाउनलोड फ़ंक्शन है, इसलिए आप एक फ़ाइल में CSS, HTML और JS के साथ एक HTML डाउनलोड कर सकते हैं, इसलिए आप इसे डीबग उद्देश्यों के लिए jsFiddle के बिना चला सकते हैं?


एक नहीं मिल सकता है। शायद वे इसे बाद में डाल देंगे?
चेट्टर हमीं

1
कच्चा स्रोत कोड चेकआउट पाने के इच्छुक लोगों के लिए @Pradeep Kumar Prabaharan का उत्तर (इसकी सराहना की जा रही है)
zelusp

जवाबों:


261

ठीक है मुझे पता चला:

आपको /showउस URL के बाद काम करना होगा जिस पर आप काम कर रहे हैं:
http://jsfiddle.net/<your_fiddle_id>/show/
यह वह साइट है जो परिणाम दिखाती है।

और फिर जब आप इसे एक फ़ाइल के रूप में सहेजते हैं। यह सब एक एचटीएमएल-फाइल में है।

उदाहरण के लिए:
http://jsfiddle.net/Ua8Cv/show/
साइट के लिए http://jsfiddle.net/Ua8Cv


1
इस सुविधा के लिए समस्या पृष्ठ यहाँ है github.com/jsfiddle/jsfiddle-docs-alpha/issues/156
लैरी बैटल

5
बहुत स्वयं में, उदाहरण के लिए, http://jsfiddle.net/Ua8Cvयदि आप /showस्रोत पाने के लिए एड्रेस बार और हिट एंटर (इसके बाद ब्राउजर शो सोर्स कोड शॉर्टकट) पर अतिरिक्त टाइप करते हैं ।
हेल्टनबीकर

1
मैं टूलबार में एक छिपे हुए बटन को jsfiddle के HTML स्रोत कोड में देख सकता हूं <a class="aiButton" id="showjscode" title="Show JavaScript code" href="#showjs"><span class="icon-pencil"></span>Show JS</a>। यह कुछ भी नहीं करता है, लेकिन शायद जल्द ही आ रहा है
corbacho

4
2015 में, /showपूर्ण पृष्ठ को सहेजने के बाद, फिर उस फ़ोल्डर को देखें _files, जिसके साथ समाप्त होता है , अंदर .htmlउदाहरण के स्रोत कोड के साथ एक फ़ाइल होनी चाहिए ।
कास्त्रो रॉय

11
महत्वपूर्ण कदम गायब। Jsfiddle.net/Ua8Cv/show के बाद जावास्क्रिप्ट का चयन करें, व्यू फ्रेम सोर्स चुनें, फिर सेव करें। सिर्फ पेज सोर्स नहीं।
एरिक ब्रिजर

87

एक पुराने प्रश्न का नया उत्तर:

विधि 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/

2
धन्यवाद! चरण 2 मेरे लिए बिल्कुल स्पष्ट नहीं था।
क्रिस प्रिंस

चरण 1 पर हमें "परिणाम" लिंक के साथ एक हेडर अतिरिक्त मिलता है-उसी पृष्ठ पर और "jsfield में संपादित करें" लिंक .. आउटपुट को राइट-क्लिक करना चाहिए (उस हेडर को छोड़कर) और व्यू फ्रेम स्रोत का चयन करें ..
प्रदीप कुमार प्रभाकरण

3
यह पूर्ण उत्तर है, स्वीकृत उत्तर से स्पष्ट नहीं है
एरिक ब्रिजर

@LeosLiterak मुझे लगता है कि आपने मेथड 1 के लिए पेज सोर्स की कोशिश की। यह व्यू फ्रेम सोर्स के लिए काम करता है । उदाहरण लिंक के साथ क्रॉस चेक करें।
प्रदीप कुमार प्रभाहरण 11

@LeosLiterak अपडेट किया गया। और याद दिलाने के लिए धन्यवाद ताकि अब उत्तर किसी भी के लिए अधिक स्पष्ट हो।
प्रदीप कुमार प्रभारण 12

15

जोड़ना / दिखाना शुद्ध स्रोत कोड प्रस्तुत नहीं करता है, यह एक एम्बेडेड कार्यशील उदाहरण है। इसे बिना किसी अतिरिक्त स्क्रिप्ट, css और html के प्रदर्शित करने के लिए उपयोग करें:

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

एक उदाहरण: http://fiddle.jshell.net/Ua8Cv/show/light/


क्या आपको लगता है कि देखा है? Resultहेडर में क्या है ?
छोटे एलियन

1
शायद यह एक बार काम करता है, लेकिन 2018 में, "fiddle.jshell.net" HTTP URL के बिना इस तरह के URL पर नेविगेट करने से यह एक iframe में एम्बेडेड होता है, जैसे jsfiddle.net/<fiddle id> / show या या jsfiddle.net / <फिडेल आईडी> / एम्बेडेड / परिणाम /
जैकब सी। का कहना है मोनिका

10

नहीं, JSField में एक डाउनलोड सुविधा नहीं है। हालांकि, यह बहुत मुश्किल नहीं है कि इसके आस-पास हो और किसी भी तरह से एक बेला की सामग्री को बचा सके।

जब से स्वीकृत उत्तर पोस्ट किया गया था, तब से JSFiddle ने कुछ हालिया UI और बैकएंड परिवर्तन किए हैं जो एक फ़िडल को डाउनलोड करने के तरीके को प्रभावित करते हैं। नीचे अद्यतन प्रक्रियाओं पर ध्यान दें।


सरल कमांडलाइन विधि

यह विधि केवल एक फ़ाइल के रूप में फिडेल के HTML, जावास्क्रिप्ट और सीएसएस को डाउनलोड करती है। फिडल के बाहरी संसाधनों को बचाया नहीं जाता है।

नीचे दिखाए गए कमांडलाइन में, फिडेल fiddle_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 का उपयोग करने पर आधारित हैं। अन्य वेब ब्राउज़र का उपयोग करने के साथ-साथ काम करना चाहिए, लेकिन वे विभिन्न फ़ाइल नाम का उपयोग कर सकते हैं।

  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" रैपर पेज है जिसे JSField "शीर्षक" शीर्षक और अन्य लिंक के साथ हेडर प्रदर्शित करने के लिए उपयोग करता है। यह एक iframe तत्व में आपकी फ़ेल्ड को लोड करेगा। अधिकांश भाग के लिए, इस फ़ाइल को अनदेखा या हटाया जा सकता है। आपकी fiddle_filesफ़ाइल का HTML, JavaScript और CSS सामग्री सभी " " निर्देशिका में " saved_resource.html" नामक एकल फ़ाइल के रूप में सहेजा जाएगा ।
  5. fiddle_files/saved_resource.htmlजहाँ भी आप इसका उपयोग करना चाहते हैं, " " कॉपी करें। यदि आपकी फ़िडल में " External Resources" के अंतर्गत आइटम शामिल हैं , तो वे " fiddle_files" निर्देशिका में भी दिखाई देंगे । उन फ़ाइलों को उसी स्थान पर कॉपी करना सुनिश्चित करें, जहां आपने " saved_resource.html" कॉपी किया था , क्योंकि HTML फ़ाइल उन संसाधनों का उल्लेख करेगी जो सापेक्ष URL का उपयोग कर रहे हैं।

जैसा कि पहले बताया गया है, अन्य ब्राउज़र सहेजे जाने पर फ़ाइलों को अलग नाम दे सकते हैं। उदाहरण के लिए, फ़ायरफ़ॉक्स संयुक्त HTML / JS / CSS फ़ाइल को नाम देता है " fiddle_files/a.html"।


7

अभी भी कोई डाउनलोड कार्यक्षमता समर्थित नहीं है .. लेकिन .. आप 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>]

यह करंट डायरेक्टरी में सभी बैकअप डाउनलोड करेगा, jsFiddles स्क्रिप्ट को नाम दिया जाएगा:

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

5

स्टेप 1:
जैसे फिडेल पेज पर जाएंjsfiddle.net/oskar/v5893p61

चरण 2:
जैसे URL के अंत में '/ शो' जोड़ेंjsfiddle.net/oskar/v5893p61/show

स्टेप 3:
पेज पर राइट क्लिक करें और व्यू फ्रेम सोर्स पर क्लिक करें । आपको टैग में CSS और टैग में जावास्क्रिप्ट (js) सहित HTML कोड मिलेगा। [इसके अलावा सभी पुस्तकालय का स्रोत लिंक जोड़ा जाएगा]। स्क्रीनशॉट देखें

स्टेप 4:
अब आप .html फाइल में सोर्स कोड सेव कर सकते हैं ।


4

सबसे अच्छा तरीका है:

  1. आउटपुट पैनल पर राइट-क्लिक करें।
  2. व्यू फ्रेम सोर्स चुनें, फिर पूरा कोड दिखाई देगा।

इसके बाद आप उस कोड को कॉपी कर सकते हैं, और अपने कंप्यूटर में पेस्ट कर सकते हैं।


2

हाल ही के एक काम में मुझे फिडेल यूआरएल की एक सूची डाउनलोड करनी थी और प्रत्येक fiddles के लिए अलग-अलग फ़ोल्डर बनाना था, जिसमें प्रत्येक के लिए अलग-अलग html css js फाइल थी, मैंने इसके लिए निम्नलिखित क्रॉलर प्रोग्राम बनाया है। https://github.com/sguha-work/FiddleCrawler । यह फ़ोल्डर का नाम काउंटर मान के साथ बनाएगा और प्रत्येक फ़ोल्डर में एक html, एक css, एक js और एक विवरण फ़ाइल होगी। (विवरण फ़ाइल में बाहरी संसाधनों के लिंक होंगे)।


1

मुझे उपरोक्त विषय के तहत एक लेख मिला। इसके द्वारा मैं पूर्ण कोड ले सकता हूं। मैं इसका उल्लेख करूंगा।

यहाँ लेख में वर्णित कदम हैं:

  1. JSFiddle URL के अंत में एम्बेडेड / परिणाम / जोड़ें जो आप हड़पना चाहते हैं।

  2. फ़्रेम या फ़्रेम का स्रोत कोड दिखाएं: पृष्ठ में कहीं भी राइट-क्लिक करें और फ़्रेम को एक नए टैब या स्रोत में दाईं-दूर देखें (फ़ायरफ़ॉक्स की आवश्यकता है)।

  3. अंत में, पृष्ठ को अपने पसंदीदा प्रारूप (एमएचटी, एचटीएमएल, TXT, आदि) और वॉइल में सेव करें!

यह भी आप इसे पा सकते हैं: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/



0

आपको जिस URL पर काम कर रहे हैं, उसके बाद आपको डाल / दिखाना होगा:

उदाहरण के लिए:

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

फ़ील्ड URL के लिए:

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

उसके बाद फ़ाइल को सहेजें और शो फोल्डर पर जाएँ (या आपके द्वारा सहेजा गया फ़ाइल नाम) उस फ़ोल्डर के तहत एक HTML फ़ाइल show_resource.HTML प्राप्त करेगा। यह आपकी वास्तविक फ़ाइल है। इसे ब्राउज़र में खोलें और स्रोत कोड देखें। । बेस्ट ऑफ लक -------- उज्ज्वल गुप्ता


कृपया उन प्रश्नों का उत्तर देना बंद कर दें जो 2 साल पहले हल किए गए उच्च उत्तर के साथ हल किए गए थे। इससे किसी को कोई लाभ नहीं होता है।
रियरेनेंग

0

ठीक है, सबसे आसान तरीका, मुझे पता चला कि बस url (jsfiddle [dot] net) को बदलकर fiddle [dot] jshell [dot] net / there u है एक स्पष्ट html कोड है, बिना किसी प्रकार के iframe ... उदाहरण: https: // jsfiddle [dot] net / mfvmoy64 / 27 / show / light / -> http: // fiddle [dot] jshell [dot] net / mfvmoy64 / 27 / show / light /

( '' '' S '' को बदलना होगा '' [dot] '' स्टेकरओवरफ़्लो के कारण ...: c ) PS: sry 4 मित्र


0

JSFiddle से सभी चीजों को एक साथ डाउनलोड करने का ऐसा उचित तरीका नहीं है, लेकिन ऐसा करने का एक हैक तरीका है। बस अपने JSFiddle URL के अंत में "एम्बेडेड /" या "एम्बेडेड / परिणाम /" जोड़ें!, और फिर आप पूरे पृष्ठ को HTML फ़ाइल + बाहरी पुस्तकालयों (यदि आप चाहते हैं) के रूप में सहेज सकते हैं।



-2

Http://jsfiddle.net/ / show / light / का उपयोग करें

फिर बस ब्राउज़र के तत्व फ़ंक्शन का उपयोग करें। आपको iframe टैब में कोड मिलेगा। । क्रोम में बस राइट क्लिक करें और html टैब के रूप में संपादित करें पर क्लिक करें। और html सामग्री को कॉपी करें। वह आपका वास्तविक कोड है।


-3

Ctrl+ S, संपूर्ण फ़ोल्डर को सहेजता है, फ़ाइलें फ़ोल्डर के अंदर वह स्वच्छ पृष्ठ होता है जिसे आप खोज रहे हैं


वे निर्देश बहुत अस्पष्ट हैं।
एलएस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.