javascript 로 파일생성, 다운로드 특정페이지 소스다운로드 등등

 

javascript 로 파일생성, 다운로드

 

javascript 에서 파일을 생성하고 이를 로컬로 다운로드 하는 방법을 설명드리고자 합니다

두가지 방법이 있는데요, 첫번째 방법은 a 태그의 download 속성을 이용하는 것입니다.

 

<script language = "javascript">
 
function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);
 
    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}
 
download('test.txt', 'Hello world!');
 
</script>
 
 
 
 

위와같이 코딩하고 나면, Hello World! 라는 내용이 A 태그의 데이터로 세팅이되고, download 속성을 가진 a태그로 인해 클릭시 다운로드가 됩니다. 

 

다만, 위 코드는 대용량 데이터의 경우에는 용량제한이 있습니다. Firefox3.6.12 의 경우 256k 까지 작동한다고 합니다. 

 

 

 

 

 

 

 

 

 

Blob 을 이용한 두번째 방법

 

 

두번째 방법은 Blob(File) 오브젝트를 만들어 거기에 원하는 내용을 입력한 후에 다운로드 하는 방식입니다.  모든 브라우저에서 동일하게 적용되지는 않습니다. 

 
<a id="link" target="_blank" download="1001.htm">Download</a>
 
 
<script language = "javascript">
var file;
var data = [];
data.push("안녕하세요\n");
data.push("브라우저에서\n");
data.push("파일을 생성하는 중입니다\n");
 
var sFileName = "file_test.html";
 
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, sFileName, properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;
 
 
</script>
 
 

 

javascript 코드를 보면, 파일객체를 직접 생성한 후에 다운로드 하는 걸 볼 수 있습니다. 특정 URL 의 내용을 다운로드 하거나 iframe 내의 소스코드를 다운로드 하고자 할때 사용하면 좋을 듯 합니다. 

 

 

 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

 

성공하는 중이다 : 네이버 카페

 

 

 

 

아래 사이트를 참고했습니다

 

qastack.kr/programming/2897619/using-html5-javascript-to-generate-and-save-a-file