링크나 버튼을 눌렀을 때 특정 파일을 사용자의 PC 다운로드 폴더에 자동으로 다운로드를 하게끔 만들고 싶을 때 우짤꼬? 방법은 다음과 같다.
- 링크태그의 HTML5 download속성을 사용해서 다운로드 파일명을 설정
- File API의Blob 을 사용해서 데이터를 작성
window.URL.createObjectURLBlob에서URL을 생성해서 링크에 설정시킴
단, 모든 브라우저에서 작동하는 것은 아니라서 Chrome과 FireFox, Edge와 Opera 는 문제가 없이 동작하지만 IE10/11 인 경우는
window.navigator.msSaveBlob(또는 msSaveOrOpenBlob)을 사용해야 하며, IE9 이하인 경우는 Blob 객체를 사용할 수 없으므로 대응이 안 됨. Safari 인 경우에는 완전히 별도의 처리를 해 줘야 하는데,
saveAs 의 polyfill에 있는 FileSaver.js 가
Safari에서 사용가능한 듯..해본 적은 없지만 ㅋㅋ
다운로드 기능 구현 샘플코드
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Download Sample</title>
</head>
<body>
<script type='text/javascript'>
function handleDownload() {
var content = 'test';
var blob = new Blob([ content ], { "type" : "text/plain" });
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, "test.txt");
// msSaveOrOpenBlob인 경우에는 파일을 저장하는 게 아니라 열기로
window.navigator.msSaveOrOpenBlob(blob, "test.txt");
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
}
</script>
<a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>
</body>
</html>
CSV파일을 다운로드 할 때 문제가 하나 있는데...일본어가 포함된 파일인 경우 엑셀에서 안 열리거나 깨지는 경우가 있다. 그럴 땐 BOM 객체를 이용해서 다운로드를 하면 가능하다.
CSV다운로드 샘플 코드 - 일본어 데이터 대응
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Download Sample</title>
</head>
<body>
<script type='text/javascript'>
function handleDownload() {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var content = 'あいうえお,かきくけこ,さしすせそ';
var blob = new Blob([ bom, content ], { "type" : "text/csv" });
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, "test.csv");
// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
window.navigator.msSaveOrOpenBlob(blob, "test.csv");
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
}
</script>
<a id="download" href="#" download="test.csv" onclick="handleDownload()">ダウンロード</a>
</body>
</html>
댓글
댓글 쓰기