Blob과 File,

by

  • Blob은 JavaScript의 기본 형식이 아닌 데이터를 나타낼 수도 있습니다.

  • File은 blob 인터페이스를 상속하고 확장하여 사용자 시스템의 파일을 지원하는 blob 기반 인터페이스입니다.

  • Blob 및 File은 생성자에 의해 인스턴스화됩니다.

import { useState, useEffect } from "react";

const IoComponent = ({setTexts, texts}) => {
    const (url, setUrl) = useState("");

    useEffect(() => {
        const blob = new Blob((texts), {type: "text/plain"});
        const file = new File((blob), "your_text.txt");
        const url = URL.createObjectURL(file);
        setUrl(url);
    }, (texts));

    return (
      <div>
          <a href={url} download="your_text.txt" >다운로드</a>
      </div>
    );
}

export default IoComponent;
  • 위의 코드는 텍스트가 변경될 때 새 File 개체와 다운로드 링크를 만듭니다.

  • 다운로드 버튼을 클릭하여 파일(.txt)을 다운로드합니다.

import { useState } from "react";

const IoComponent = ({setTexts, texts}) => {
    const (url, setUrl) = useState("");

    const inputFileHandler = (e) => {
        const file = e.target.files(0);

        const fileReader = new FileReader();
        fileReader.readAsText(file);
        
        fileReader.onload = () => {
            // 기존 텍스트에 읽은 파일의 텍스트 추가
            setTexts(texts + "\n" + fileReader.result);             
        };        
    }

    return (
      <div>
          <input type="file" onChange={inputFileHandler}/>
      </div>
    );
}

export default IoComponent;
  • 위 코드에는 파일을 받을 수 있는 input 태그가 있습니다.

  • 제공된 파일(.txt)을 FileReader 객체로 읽어 기존 텍스트 끝에 추가합니다.

https://developer.mozilla.org/en/docs/Web/API/Blob

Blob – 웹 API | MDN

Blob 개체는 파일과 같은 원시, 변경 불가능한 데이터를 나타냅니다.

텍스트 및 이진 데이터 형식으로 읽을 수 있으며 ReadableStream으로 변환하고 Stream 메서드를 사용하여 처리할 수 있습니다.

'추천 관련글,

developer.mozilla.org

https://developer.mozilla.org/en/docs/Web/API/File

파일 – 웹 API | MDN

파일 인터페이스는 파일에 대한 정보를 제공하고 웹 페이지에서 JavaScript를 사용하여 파일 내용에 액세스할 수 있도록 합니다.

developer.mozilla.org