[카테고리:] JavaScript

웹에서 ArrayBuffer를 파일로 저장하기 위한 코드에 대한 내용입니다.

웹에서는 PC에 저장된 파일을 읽거나 쓸때 반드시 사람의 행위가 수반되어야 합니다. 즉, 버튼과 같은 UI를 사람이 의도하여 클릭을 해야만 한다는 것입니다. 이를 위해 필요한 UI에 대한 DOM 요소를 아래처럼 생성해 둡니다.

<button id="exportFile">Export To File</button>

그리고 위의 버튼에 대한 클릭 이벤트에 대한 코드는 다음과 같이 지정하구요.

const exportButton = document.getElementById( 'exportFile' );
exportButton.addEventListener( 'click', exportFile );

위의 exportFile 함수에 대한 코드는 다음과 같습니다.

function exportFile() {
    const buffer = createData(); /* ArrayBuffer 형식의 데이터를 생성하는 함수 */ 
    const blob = new Blob( [ buffer ], 
        { type: 'application/octet-stream' } )
    link.href = URL.createObjectURL( blob );
    link.download = 'file.dat';
    link.click();
}

위의 코드에서 link는 다음처럼 동적으로 생성된 a 테그 요소입니다.

const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );

결과적으로 사용자가 버튼을 클릭하면 a Tag가 클릭한 것으로 처리되어 파일 저장이 진행됩니다.

여기서 추가로 만약 저장하고자 하는 데이터가 바이너리가 아닌 텍스트라면 위의 코드 중 변경해야할 부분은 어딜까요? exportFile 함수에 대한 코드 중 3,4번의 buffer가 단순한 문자열 값이며 type: ‘text/plain’로 지정해 주면 됩니다.