HTML5 에서 파일 다운로드 테스트
원문참조
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
HTML5 File API Documentation: http://www.w3.org/TR/FileAPI/
개요
HTML5에서 제공하는 <a> 태그를 이용하면 두가지 방법으로 브라우저 화면에서 로컬 파일에 저장할 수가 있다.
HTML5의 <a>태그에 딸린 download 속성을 사용하면 링크를 클릭하여 download 속성 값을 파일이름으로 지정하여 href 속성에 지정된 파일을 다운로드할 수 있다. 이 방법을 사용하면 [마우스 우측을 눌러 저장하기를 선택하세요] 라는 안내를 할 필요가 없게 된다. 텍스트 파일이나 이미지 파일이라도 브라우저에 열리지 않고 파일로 저장되기 때문이다.
또 한가지 방법은 href속성에 파일명을 지정하는 것이 아니라 Data URI를 적용하면 자바스크립트에서 생성된 텍스트나 자바스크립트로 전달된 데이터를 파일에 저장할 수 있다. 이 방법을 사용하면 href 속성의 값에 파일의 경로가 아닌 데이터 그 자체를 적용할 수 있고 download 속성에는 저장할 데이터의 파일명을 지정할 수 있다.
요약하자면 <a>태그의 href 속성으로 다운로드할 데이터 URI 나 다운로드할 파일명을 지정하고, download속성으로 데이터를 저장할 파일명을 지정할 수 있다. href 속성에는 다운로드할 서버측 파일을 지정하거나 저장할 실제 데이터가 Data URI 형식으로 지정되고 download 속성에는 로컬 파일로 저장할 때의 파일명을 지정해주면 된다.
href 속성에 서버측에 위치한 소스파일명을 지정하고 download 속성에 목적 파일명을 지정한 예
<div>
<a href="sample.html" download="test.html">HTML 파일 다운로드</a>
</div>
<div>
<a href="sample.jpg" download="test.jpg">이미지 파일 다운로드</a>
</div>
위의 예에서는 sample.html 파일을 다운로드하여 로컬 시스템에 test.html 이라는 이름으로 저장된다.
자바스크립트에서 동적으로 지정한 파일을 다운로드하는 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!--
<script src="jquery-2.0.3.js"></script>
-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
// 화면에 보이지 않는 상태의 a 태그에 동적으로 href, download 속성을 지정하고 click 이벤트를 발생시키면 다운로드 된다
$('#btnTest').click( function(e) {
//서버상의 sample.jpg 파일을 test.jpg 라는 이름으로 로컬시스템에 저장
$('#downloadLink').prop('href', 'sample.jpg');
$('#downloadLink').prop('download', 'test.jpg');
$('#downloadLink')[0].click();
});
});
</script>
</head>
<body>
<!--화면에 보이지않는 링크에 동적으로 속성값을 설정하여 다운로드하도록 할 수 있다-->
<a style="display:none;" id="downloadLink" href="#" download="#"></a>
<button id="btnTest">TEST</button>
</body>
</html>
href 속성에 Data URI를 사용하여 데이터 그 자체를 포함하는 예
자주 사용되는 Data URI의 형식들
'data:Application/octet-stream,' +encodeURIComponent(dataToDownload);
'data:application/text;charset=utf-8,' + encodeURIComponent(dataToDownload);
'data:application/csv;charset=utf-8,' + encodeURIComponent(dataToDownload);
'data:text/csv;base64,' + encodeURIComponent(dataToDownload);
HTML5에서 지원하는 다운로드 링크는 다음과 같은 형식으로 사용된다
<a href="#" download="data.csv" id="downloadLink" >Click to Download</a>
아래와 같은 링크를 구성하고 클릭하면 현재 HTML코드 전체가 test.txt 라는 이름으로 다운로드 된다
<a href="#" download="test.txt">다운로드</a>
아래와 같은 링크는 [실패 - 파일 없음] 메시지가 나타나고 아무것도 다운로드 되지 않는다
<a href="abcdefg" download="test.txt">다운로드</a>
다음과 같이 href 속성에 data URI 를 적용하면 URI의 끝 부분에 부가된 'HelloWorld' 문자열이 test.txt 파일에 저장된다
<a href='data:application/text;charset=utf-8,HelloWorld' download="test.txt">다운로드</a>
data URI 에 부가된 텍스트 데이터에 공백문자가 포함된 경우에는 공백이 사라진 텍스트로 저장된다. 즉, 위와 같은 결과로 나타난다.
<a href='data:application/text;charset=utf-8,Hello World' download="test.txt">다운로드</a>
다음과 같은 data URI를 사용하면서 쉼표로 분리된 텍스트 데이터를 다운로드하면 엑셀 데이터 파일을 다운로드할 수 있다
<a href='data:application/csv;charset=utf-8,ABc,DEF,GHI,JKL' download="test.csv">다운로드</a>
부가된 데이터에 공백문자와 같은 URI에 적용할 수 없는 문자가 포함된 경우에는 URI 인코딩을 한 후에 전달하면 공백이나 한글도 저장된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Download Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var str = 'Hello World';
//Data URI
var uriEncodedData = 'data:application/text;charset=utf-8,' + encodeURIComponent(str);
$(document).ready( function() {
$('#downloadLink').attr('href', uriEncodedData);
});
</script>
</head>
<body>
<a href='#' id="downloadLink" download="test.txt">다운로드</a>
</body>
</html>
다운로드 링크를 클릭할 때 동적으로 Data URI를 구성하는 예, 한글이 저장된 파일이 다운로드된다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5 Download Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#downloadLink').click( function () {
var str = '감사합니다';
//Data URI
var uriEncodedData = 'data:application/text;charset=utf-8,' + encodeURIComponent(str);
$('#downloadLink').attr('href', uriEncodedData);
});
});
</script>
</head>
<body>
<a href='#' id="downloadLink" download="test.txt">다운로드</a>
</body>
</html>
로컬상의 텍스트 파일을 로드해서 textarea 에서 편집하고 다시 저장할 때 Blob 형식을 사용하는 예
<html>
<body>
<table>
<tr><td>Text to Save:</td></tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
</td>
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></input></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button><td>
</tr>
</table>
<script type='text/javascript'>
function saveTextAsFile()
{
var textToWrite = document.getElementById("inputTextToSave").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>
</body>
</html>