[jsfiddle] 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, CompleteFormat“메뉴 에서 ” ” 를 선택해야 합니다. 페이지 이름을 지정하십시오. 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. 프레임 소스보기를 선택하면 전체 코드가 나타납니다.

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