JavaScript를 사용하여 텍스트 상자 값을 파일에 저장

이 기사에서는 JavaScript를 사용하여 텍스트 상자 값을 파일로 변환하는 방법을 배웁니다. HTML, CSS, 텍스트 등과 같은 모든 유형의 파일을 생성하려는 경우 다양한 유형의 텍스트 편집기를 사용하여 수동으로 사용합니다. 그러나 이러한 유형의 프로젝트를 사용하면 이 작업을 더 쉽게 수행할 수 있습니다. 이 프로젝트를 사용하면 텍스트 콘텐츠를 파일로 쉽게 저장할 수 있습니다.

어떻게 작동하는지 확인할 수 있습니다watch the live demo. 먼저 다양한 유형의 텍스트나 정보를 입력할 수 있는 상자를 만들었습니다. 이 상자를 만드는 데 텍스트 영역이 사용되었습니다. 그리고 HTML의 입력 기능을 이용하여 생성한 입력 공간이 있습니다.

입력 상자에서 선택한 파일의 이름을 추가하고 변환하려는 파일을 추가할 수 있습니다. 그런 다음 다운로드 버튼을 클릭하면 해당 텍스트 영역의 텍스트가 파일로 변환되어 저장됩니다. HTML CSS와 JavaScript를 사용하여 이 프로젝트를 만들었습니다.



위 영상이 조금이나마 도움이 되셨기를 바랍니다. 그러나 아래에서 단계별 자습서를 공유했습니다. 원하는 경우 이 프로젝트(JavaScript를 사용하여 Textarea Text to a File)를 만들 수 있습니다download the source code.

1. 웹페이지에 박스 생성

<div id="container">

</div>

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #044b82;
  font-family: "Kanit", Verdana, Arial, sans-serif;
}

#container {
  width: 430px;
  padding: 40px 20px;
  background: white;
}

2. 제목 추가

<h1>Save the text to a file</h1>

h1 {
  color: #0773d7;
  font-size: 30px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}

3. 텍스트 입력 상자 만들기

<textarea placeholder="Type your text here..." id="text"></textarea>

#text {
  display: block;
  width: 100%;
  background-color: transparent;
  color: #021652;
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  resize: none;
  margin-bottom: 35px;
  height: 200px;
  padding: 10px;
  font-size: 20px;
}

4. 파일명을 입력하는 박스 생성

<input id="filename" placeholder="Specify a filename..." />

#filename {
  width: calc(100% - 200px);
  border: 2px solid #3ba9f4;
  border-radius: 2px;
  background-color: transparent;
  color: #052a53;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  margin-right: 20px;
}

5. 파일 다운로드 버튼 생성

<button id="download">Download file</button>

#download {
  background-color: #3ba9f4;
  color: #fff;
  font-size: 20px;
  height: 50px;
  border: none;
  border-radius: 2px;
  width: 174px;
  cursor: pointer;
}

6. JavaScript로 파일에 텍스트 저장

function downloadFile(filename, content) {
  // It works on all HTML5 Ready browsers as it uses the download attribute of the <a> element:
  const element = document.createElement('a');

  //A blob is a data type that can store binary data
  // "type" is a MIME type
  // It can have a different value, based on a file you want to save
  const blob = new Blob([content], { type: 'plain/text' });

  //createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
  const fileUrl = URL.createObjectURL(blob);

  //setAttribute() Sets the value of an attribute on the specified element.
  element.setAttribute('href', fileUrl); //file location
  element.setAttribute('download', filename); // file name
  element.style.display = 'none';

  //use appendChild() method to move an element from one element to another
  document.body.appendChild(element);
  element.click();

  //The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node
  document.body.removeChild(element);
};

window.onload = () => {
  document.getElementById('download').
  addEventListener('click', e => {

    //The value of the file name input box
    const filename = document.getElementById('filename').value;

    //The value of what has been input in the textarea
    const content = document.getElementById('text').value;

    // The && (logical AND) operator indicates whether both operands are true. If both operands have nonzero values, the result has the value 1 . Otherwise, the result has the value 0.

    if (filename && content) {
      downloadFile(filename, content);
    }
  });
};

위의 자습서가 JavaScript를 사용하여 이 텍스트 상자 값을 파일에 저장하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 이 디자인이 마음에 드는지에 대해 의견을 말해야 합니다.

이와 같은 더 많은 자습서를 보려면 내 블로그를 방문하십시오.
https://www.foolishdeveloper.com/