มีฟังก์ชั่นดาวน์โหลดใน jsFiddle หรือไม่?

มีฟังก์ชั่นดาวน์โหลดใน jsFiddle หรือไม่ดังนั้นคุณสามารถดาวน์โหลด HTML ด้วย CSS, HTML และ JS ได้ในไฟล์เดียว

ตกลงฉันพบ:

คุณต้องใส่/showURL ที่คุณใช้งานอยู่:
http://jsfiddle.net/<your_fiddle_id>/show/
เป็นเว็บไซต์ที่แสดงผลลัพธ์

และเมื่อคุณบันทึกเป็นไฟล์แล้ว มันคือทั้งหมดในไฟล์ HTML หนึ่งไฟล์

ตัวอย่างเช่น:
http://jsfiddle.net/Ua8Cv/show/
สำหรับไซต์ http://jsfiddle.net/Ua8Cv

คำตอบใหม่สำหรับคำถามเก่า:

วิธีที่ 1:

ขั้นตอนที่ 1 : คุณต้องใส่/showหลังจากที่URLคุณทำงาน:

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

มันแสดงผลลัพธ์ด้วยส่วนหัวของผลลัพธ์

ขั้นตอนที่ 2 : คลิกขวาที่กรอบด้านล่างและเลือกดูกรอบที่มา แค่นั้นแหละ. คุณได้รับรหัส html พร้อมลิงก์ JS ออนไลน์, CSS

เพียงบันทึกไว้

ตัวอย่างเช่น: 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/

การเพิ่ม / แสดงไม่แสดงซอร์สโค้ดแท้ๆมันเป็นตัวอย่างการทำงานที่ฝังอยู่ หากต้องการแสดงโดยไม่มีสคริปต์เพิ่มเติม css และ html ให้ใช้:

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

ตัวอย่าง: http://fiddle.jshell.net/Ua8Cv/show/light/

ไม่ JSFiddle ไม่มีคุณสมบัติการดาวน์โหลด อย่างไรก็ตามมันไม่ยากที่จะหลีกเลี่ยงสิ่งนั้นและบันทึกเนื้อหาของซอต่อไป

ตั้งแต่เวลาที่คำตอบที่ยอมรับถูกโพสต์ JSFiddle ได้ทำ UI ล่าสุดและการเปลี่ยนแปลงแบ็กเอนด์ที่มีผลต่อวิธีการดาวน์โหลดซอ หมายเหตุขั้นตอนการอัพเดทด้านล่าง

วิธีการ Commandline ง่าย

วิธีนี้ดาวน์โหลด HTML, JavaScript และ CSS ของซอเป็นไฟล์เดียว ทรัพยากรภายนอกของซอไม่ได้รับการบันทึก

ใน commandline ที่แสดงด้านล่างfiddle_idหมายถึงหมายเลข ID ของซอ สำหรับซอที่มี URL " http://jsfiddle.net/<fiddle_user>/<fiddle_id>" หรือ " http://jsfiddle.net/<fiddle_id>" fiddle_idจำเป็นต้องมีเท่านั้น fiddle_userจะไม่สำคัญ

ที่ shell prompt ให้ป้อน commandline เดียว:

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/Embedเมนู / ลิงก์ "" ที่ด้านบนของหน้าแก้ไข JSFiddle ในกล่องโต้ตอบที่ปรากฏขึ้นให้คัดลอก URL ที่แสดงในช่อง " Share full screen result" มันจะอยู่ในรูปแบบ " 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" เป็นหน้าที่ห่อหุ้มที่ JSFiddle ใช้เพื่อแสดงส่วนหัวที่มีชื่อ "ผลลัพธ์" และลิงก์อื่น ๆ มันจะโหลดซอของคุณในองค์ประกอบ iframe ส่วนใหญ่ไฟล์นี้สามารถละเว้นหรือลบได้ เนื้อหา HTML, JavaScript และ CSS ของซอของคุณจะถูกบันทึกไว้ในfiddle_filesไดเรกทอรี "" เป็นไฟล์เดียวชื่อ "saved_resource.html "
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

ในการดาวน์โหลดซอเดียวจาก 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

ในการดาวน์โหลดสคริปต์ทั้งหมดของ 'user' ที่กำหนดจาก jsFiddle.net:

jsfiddle-downloader -u <user> [-o <output file>]

มันจะดาวน์โหลดข้อมูลสำรองทั้งหมดในไดเรกทอรี currrent สคริปต์ jsFiddles จะตั้งชื่อเป็น:

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

ขั้นตอนที่ 1:
ไปที่หน้าซอเช่นjsfiddle.net/oskar/v5893p61

ขั้นตอนที่ 2:
เพิ่ม '/ แสดง' ที่ส่วนท้ายของ URL เช่นjsfiddle.net/oskar/v5893p61/show

ขั้นตอนที่ 3:
คลิกขวาบนหน้าและคลิกดูโค้ดกรอบ คุณจะได้รับรหัส HTML รวมถึง CSS ในแท็กและ Javascript (js) ในแท็ก [นอกจากนี้ยังมีการเพิ่มลิงก์ซอร์สของไลบรารีทั้งหมด] ดูภาพหน้าจอ

ขั้นตอนที่ 4:
ตอนนี้คุณสามารถบันทึกซอร์สโค้ดในไฟล์. html

วิธีที่ดีที่สุดคือ:

1. คลิกขวาที่แผงแสดงผล
2. เลือกแหล่งเฟรมมุมมองจากนั้นโค้ดทั้งหมดจะปรากฏขึ้น

หลังจากนั้นคุณสามารถคัดลอกรหัสนั้นและวางลงในคอมพิวเตอร์ของคุณ

ในการทำงานเมื่อเร็ว ๆ นี้ฉันต้องดาวน์โหลดรายการซอ URL และสร้างโฟลเดอร์แยกต่างหากสำหรับแต่ละซอร์ดที่มีไฟล์ html css js แยกกันสำหรับแต่ละฉันได้สร้างโปรแกรมรวบรวมข้อมูลต่อไปนี้ https://github.com/sguha-work/FiddleCrawler มันจะสร้างชื่อโฟลเดอร์ที่มีค่าตัวนับและแต่ละโฟลเดอร์จะมี html, css, js และไฟล์รายละเอียด (ไฟล์รายละเอียดจะเก็บลิงค์ของแหล่งข้อมูลภายนอก)

ฉันพบบทความภายใต้หัวข้อข้างต้นโดยฉันสามารถใช้รหัสเต็มฉันจะพูดถึงมัน

นี่คือขั้นตอนที่กล่าวถึงในบทความ:

1. เพิ่มสมองกลฝังตัว / ผลลัพธ์ / ที่ส่วนท้ายของ URL JSFiddle ที่คุณต้องการคว้า

2. แสดงเฟรมหรือซอร์สโค้ดของเฟรม: คลิกขวาที่ใดก็ได้ในหน้าและดูเฟรมในแท็บใหม่หรือแหล่งทันที (ต้องใช้ Firefox)

3. สุดท้ายให้บันทึกหน้าเว็บในรูปแบบที่คุณต้องการ (MHT, HTML, TXT, ฯลฯ ) และทำตาม!

นอกจากนี้คุณสามารถค้นหาได้: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

คุณสามารถดาวน์โหลดโดยใช้แพ็คเกจนี้ในโหนด js

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

คุณต้องใส่ / แสดง URL ที่คุณใช้งานอยู่:

ตัวอย่างเช่น:

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

สำหรับ URL ฟิลด์:

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

หลังจากนั้นให้บันทึกไฟล์และไปที่โฟลเดอร์แสดง (หรือชื่อไฟล์ที่คุณได้บันทึกไว้) ภายใต้โฟลเดอร์นั้นคุณจะได้รับไฟล์ html show_resource.HTML ซึ่งเป็นไฟล์จริงของคุณเปิดในเบราว์เซอร์และดูซอร์สโค้ด . ขอให้โชคดีที่สุด -------- Ujjwal Gupta

โอเควิธีที่ง่ายที่สุดที่ฉันพบคือเพียงเปลี่ยน url (jsfiddle [dot] net) เป็นซอ [dot] jshell [dot] net / คุณมีรหัส html ที่ชัดเจนโดยไม่มี iframe ใด ๆ ... ตัวอย่าง: https: // jsfiddle [dot] net / mfvmoy64 / 27 / show / light / -> http: // fiddle [dot] jshell [dot] net / mfvmoy64 / 27 / show / light /

( ต้องเปลี่ยน '.' 's เป็น "[dot]" เนื่องจาก stackeroverflow ... : c ) PS: sry 4 bad english

ไม่มีวิธีที่เหมาะสมในการดาวน์โหลดทุกสิ่งด้วยกันจาก JSFiddle แต่มีวิธีแฮ็คที่จะทำเช่นนั้น เพียงเพิ่ม "embedded /" หรือ "embedded / result /" ที่ท้าย JSFiddle URL ของคุณ! จากนั้นคุณสามารถบันทึกทั้งหน้าเป็นไฟล์ HTML + ไลบรารีภายนอก (ถ้าคุณต้องการ)

มี jsfiddle-downloaderNPM

ใช้http://jsfiddle.net/ / show / light /

จากนั้นใช้ฟังก์ชันตรวจสอบองค์ประกอบของเบราว์เซอร์ คุณจะได้รับรหัสในแท็บ iframe . ในโครเมี่ยมเพียงคลิกขวาและคลิกที่แก้ไขเป็นแท็บ HTML และคัดลอกเนื้อหา html นั่นคือรหัสจริงของคุณ

Ctrl+ S, บันทึกซอทั้งหมด, ภายในโฟลเดอร์ไฟล์มีหน้าที่ทำความสะอาดที่คุณต้องการ