JavaScript – GIS Developer

웹에서 JS 언어만으로 로컬에 저장된 텍스트 파일을 읽어 오는 코드를 정리한 글이다. 먼저 아래는 예제 코드 실행을 위한 DOM 구성에 대한 코드이다.

<button onclick="openTextFile()">Open</button>
<div id='output'>...</div>

1 2	<button onclick="openTextFile()">Open</button> <div id='output'>...</div>

Open 버튼을 클릭하면 텍스트 파일을 선택할 수 있는 대화상자가 표시되도록 하며, 여기서 읽고자 하는 파일을 사용자가 선택하면 id가 output인 div에 텍스트 파일의 내용을 출력한다. 이에 대한 코드는 아래와 같다.

function openTextFile() {
    var input = document.createElement("input");

    input.type = "file";
    input.accept = "text/plain";

    input.onchange = function (event) {
        processFile(event.target.files[0]);
    };

    input.click();
}

function processFile(file) {
    var reader = new FileReader();

    reader.onload = function () {
        output.innerText = reader.result;
    };

    reader.readAsText(file, /* optional */ "euc-kr");
}

function openTextFile() {

var input = document.createElement("input");

input.type = "file";

input.accept = "text/plain";

input.onchange = function (event) {

processFile(event.target.files[0]);

};

input.click();

}

function processFile(file) {

var reader = new FileReader();

reader.onload = function () {

output.innerText = reader.result;

};

reader.readAsText(file, /* optional */ "euc-kr");

}

openTextFile은 Open 버튼 클릭시 호출하는 함수이다. processFile은 openTextFile에서 호출되는 함수로 선택된 파일을 읽어 div에 그 내용을 출력한다. IE와 Chrome 모두에서 정상적으로 작동하는 것을 확인했다.

웹에서 스크립트만으로 텍스트 파일을 생성하기 위한 코드를 정리한다. 주로 사용하는 웹브라우져가 IE와 Chrome인데, 텍스트 파일을 생성하는 방식이 서로 다르다. 먼저 크롬의 경우에는 아래와 같다.

function saveToFile_Chrome(fileName, content) {
    var blob = new Blob([content], { type: 'text/plain' });

    objURL = window.URL.createObjectURL(blob);
            
    // 이전에 생성된 메모리 해제
    if (window.__Xr_objURL_forCreatingFile__) {
        window.URL.revokeObjectURL(window.__Xr_objURL_forCreatingFile__);
    }
    window.__Xr_objURL_forCreatingFile__ = objURL;

    var a = document.createElement('a');

    a.download = fileName;
    a.href = objURL;
    a.click();
}

function saveToFile_Chrome(fileName, content) {

var blob = new Blob([content], { type: 'text/plain' });

objURL = window.URL.createObjectURL(blob);

// 이전에 생성된 메모리 해제

if (window.__Xr_objURL_forCreatingFile__) {

window.URL.revokeObjectURL(window.__Xr_objURL_forCreatingFile__);

}

window.__Xr_objURL_forCreatingFile__ = objURL;

var a = document.createElement('a');

a.download = fileName;

a.href = objURL;

a.click();

}

다음은 IE에서 작동하는 코드이다.

function saveToFile_IE(fileName, content) {
    var blob = new Blob([content], { type: "text/plain", endings: "native" });

    window.navigator.msSaveBlob(blob, fileName);
    //window.navigator.msSaveOrOpenBlob(blob, fileName);
}

function saveToFile_IE(fileName, content) {

var blob = new Blob([content], { type: "text/plain", endings: "native" });

window.navigator.msSaveBlob(blob, fileName);

//window.navigator.msSaveOrOpenBlob(blob, fileName);

}

아래는 현재 사용하는 웹브라우저가 IE인지를 식별하는 함수이다.

function isIE() {
    return (navigator.appName === 'Netscape' && navigator.userAgent.search('Trident') !== -1) ||
        navigator.userAgent.toLowerCase().indexOf("msie") !== -1;
}

function isIE() {

return (navigator.appName === 'Netscape' && navigator.userAgent.search('Trident') !== -1) ||

navigator.userAgent.toLowerCase().indexOf("msie") !== -1;

}

카테고리: JavaScript

웹에서 Javascript 만으로 텍스트 파일 읽기

웹에서 Javascript 만으로 텍스트 파일 생성