jsFiddle에 다운로드 기능이 있습니까?

jsFiddle에 다운로드 기능이 있으므로 CSS, HTML 및 JS가 포함 된 HTML을 하나의 파일로 다운로드하여 jsFiddle없이 디버그 목적으로 실행할 수 있습니까?

알았어.

/show작업중 인 URL 뒤에 http://jsfiddle.net/<your_fiddle_id>/show/ 를 넣어야 합니다.

이 사이트 그 쇼 결과입니다.

그런 다음 파일로 저장하면 하나의 HTML 파일에 있습니다.

예 :
http://jsfiddle.net/Ua8Cv
사이트의 경우 http://jsfiddle.net/Ua8Cv/show/

오래된 질문에 대한 새로운 답변 :

방법 1 :

1 단계 : 작업을 /show마친 후에해야 URL합니다.

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

결과 헤더와 함께 출력을 보여줍니다.

2 단계 : 하단 프레임을 마우스 오른쪽 버튼으로 클릭하고 프레임 소스보기를 선택 합니다. 그게 다야. 온라인 JS 링크 인 CSS로 HTML 코드를 얻었습니다.

그냥 저장하십시오.

예 : http://jsfiddle.net/YRafQ/20/ 사이트의 경우 http://jsfiddle.net/YRafQ/20/show/

참고 : 페이지 소스보기가 아닌 프레임 소스 보기

방법 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/

/ show를 추가하면 순수한 소스 코드가 표시되지 않으며 내장 된 작업 예제입니다. 추가 스크립트, CSS 및 HTML없이 표시하려면 다음을 사용하십시오.

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

예 : http://fiddle.jshell.net/Ua8Cv/show/light/

아니요, 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중요하지 않습니다.

쉘 프롬프트에서 단일 명령 행을 입력하십시오.

fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"

바이올린은 " fiddle_id.html" 파일에 저장됩니다 .

더 긴 브라우저 방법

이 방법은 외부 리소스뿐만 아니라 바이올린을 다운로드합니다. 주어진 단계는 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. 브라우저의 저장 기능을 사용하여 페이지와 모든 리소스를 로컬 컴퓨터에 저장하십시오. 예를 들어 Chrome을 사용하여 모든 리소스를 저장하려면 Webpage, Complete" Format"메뉴 에서 " " 를 선택해야 합니다. 페이지 이름을 지정하십시오. fiddle.html이 예에서는 이름이 " " 라고 가정 합니다.
4. 페이지가 컴퓨터에 저장되면 " fiddle.html"파일과 " fiddle_files" 디렉토리가 있습니다. " fiddle.html" 파일 은 JSFiddle이 "Result"제목 및 기타 링크가있는 헤더를 표시하는 데 사용하는 랩퍼 페이지입니다. 바이올린을 iframe 요소에로드합니다. 대부분의 경우이 파일은 무시하거나 삭제할 수 있습니다. 바이올린의 HTML, JavaScript 및 CSS 컨텐츠는 모두 " fiddle_files"디렉토리에 " "라는 단일 파일로 저장됩니다saved_resource.html " .
5. fiddle_files/saved_resource.html사용하려는 위치에 " "를 복사 하십시오. 바이올린에 " External Resources" 아래에 항목이 포함되어 있으면 " fiddle_files"디렉토리 에도 나타납니다 . saved_resource.htmlHTML 파일은 상대 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

다운로드 jsFiddle.net에서 결정된 '사용자'의 모든 스크립트 다음을 수행하십시오.

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

currrent 디렉토리에 모든 백업을 다운로드하며 jsFiddles 스크립트의 이름은 다음과 같습니다.

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

1 단계 :
같은 바이올린 페이지로 이동jsfiddle.net/oskar/v5893p61

2 단계 :
URL 끝에 '/ show'추가jsfiddle.net/oskar/v5893p61/show

3 단계 :
페이지를 마우스 오른쪽 단추로 클릭하고 프레임 소스보기를 클릭하십시오 . 태그에 CSS를 포함하고 태그에 Javascript (js)를 포함하는 HTML 코드를 얻게됩니다. [모든 라이브러리의 소스 링크도 추가됩니다]. 스크린 샷보기

4 단계 :
이제 소스 코드 를 .html 파일로 저장할 수 있습니다 .

가장 좋은 방법은 다음과 같습니다.

1. 출력 패널을 마우스 오른쪽 버튼으로 클릭하십시오.
2. 프레임 소스보기를 선택하면 전체 코드가 나타납니다.

그런 다음 해당 코드를 복사하여 컴퓨터에 붙여 넣을 수 있습니다.

최근 작품에서 바이올린 URL 목록을 다운로드하고 각각에 대해 별도의 html css js 파일이있는 각 바이올린에 대해 별도의 폴더를 만들어야했습니다.이를 위해 다음 크롤러 프로그램을 만들었습니다. https://github.com/sguha-work/FiddleCrawler . 카운터 값으로 폴더 이름을 만들고 각 폴더에는 html, css, js 및 세부 정보 파일이 있습니다. 세부 사항 파일은 외부 자원의 링크를 보유합니다.

위의 주제에서 기사를 찾았습니다. 전체 코드를 사용할 수 있습니다.

이 기사에서 언급 한 단계는 다음과 같습니다.

1. 잡으려는 JSFiddle URL 끝에 임베디드 / 결과 /를 추가하십시오.

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 뒤에 / show를 넣어야합니다.

예를 들면 다음과 같습니다.

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

필드 URL의 경우 :

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

그 후 파일을 저장하고 해당 폴더 아래의 show 폴더 (또는 저장 한 파일 이름)로 이동하십시오 .u 실제 파일 인 html 파일 show_resource.HTML을 얻습니다. 이제 브라우저에서 열고 소스 코드를 봅니다. . 행운을 빕니다 -------- Ujjwal Gupta

좋아, 가장 쉬운 방법은 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 ... : c 때문에 '.'를 "[dot]"로 변경해야합니다. ) PS : sry 4 bad english

JSFiddle에서 모든 것을 함께 다운로드하는 적절한 방법은 없지만 그렇게 할 수있는 해킹 방법이 있습니다. JSFiddle URL 끝에 "embedded /"또는 "embedded / result /"를 추가하기 만하면 전체 페이지를 HTML 파일 + 외부 라이브러리 (원하는 경우)로 저장할 수 있습니다.

npm-package가 jsfiddle-downloader있습니다.

http://jsfiddle.net/ / show / light /를 사용하십시오.

그런 다음 브라우저의 요소 검사 기능을 사용하십시오. iframe 탭에 코드가 표시됩니다. . 크롬에서 마우스 오른쪽 버튼을 클릭하고 HTML 탭으로 편집을 클릭하십시오. html 컨텐츠를 복사하십시오. 그것이 실제 코드입니다.

Ctrl+ S, 전체 바이올린을 저장합니다. 파일 폴더 안에 찾고있는 클린 페이지가 있습니다.