전단 읽 기 Blob 내용

약술 하 다
전단 은 안전 상의 요소 로 인해 파일 을 직접 작성 할 수 없습니다.그러나 실제 업무 수요 에 서 는 다양한 파일 의 다운로드, 미리 보기 가 불가피 하 다.서버 에서 파일 을 다운로드 하 는 것 이 스 트림 형식 으로 전단 에 전달 된다 면 전단 은 보통 스 트림 을 objectURL 으로 전환 하고 a 태그 의 download 속성 을 빌려 파일 을 다운로드 합 니 다.그러나 파일 을 다운로드 하 는 데 실패 하 는 장면 이 있 을 때 가 있 습 니 다. 이러한 서버 메시지 의 반환 형식 은 더 이상 스 트림 이 아니 라 json 입 니 다. 이 때 는 전단 에서 파일 을 정상적으로 내 보 낼 수 있 지만 파일 내용 은 서버 에서 돌아 온 메시지 로 처리 가 타당 하지 않 을 때 스 트림 을 읽 는 방법 이 있 었 으 면 좋 겠 습 니 다.본 고 는 간단하게 요약 하고 전단 에서 이 진 흐름 을 읽 는 방법 을 요약 한다.
바 이 너 리 파일 다운로드
일반적인 바 이 너 리 파일 다운로드: 먼저 요청 헤더 response-type 를 blob 로 설정 해 야 합 니 다. 그 다음 에 응답 메 시 지 를 받 았 을 때 다음 과 같은 방법 을 사용 할 수 있 습 니 다.

function download(blob) {
    //     blob  
    let url = URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.setAttribute('download', url)
    a.href=ur;
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    //     URL.createObjectURL,        URL  ，                
    //    document   ，         
    //          ， url     ，         
    URL.revokeObjectURL(url)
}

바 이 너 리 파일 읽 기
위 는 바 이 너 리 스 트림 파일 의 일반적인 다운로드 방식 일 뿐 입 니 다. 서버 에서 전 송 된 응답 형식 content-type=application/json 이 있 을 때 저 희 는 바 이 너 리 스 트림 방식 으로 처리 하면 파일 내용 을 내 보 내 는 데 문제 가 발생 할 수 있 습 니 다. 예 를 들 어 Excel 에서 내용 은 서버 응답 메시지 이기 때문에 서버 응답 내용 을 처리 할 때 사전 차단 이 필요 합 니 다.

blob 변 수 를 설명 합 니 다

    var debug = { hello: "world" };
    var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'})

blob 내용 의 읽 기 는 주로 두 가지 방식 으로 FileReader 와 Response 가 있다.
FileReader FileReader 말 그대로 이 대상 은 주로 파일 내용 을 읽 는 데 사용 되 고 호환성 이 좋 으 며 다음 과 같은 몇 가지 읽 기 내용 형식 이 있다. readAsArrayBuffer, readAsBinaryString, readAsDataURL, readdAsText.FileReader 읽 기 방법 은 주로 다음 과 같다.

  var reader = new FileReader()
  reader.addEventListener('loadend', function (e) {
    //       {hello: world}
    console.log(e.target.result)
  })
  reader.readAsText(blob)

Response Response 은 Fetch API 의 인터페이스 로 요청 데이터 에 대한 응답 을 보 여 줍 니 다.브 라 우 저 호환성 FileReader 보다 하마터면 지원 Chrome 42+, FireFox 39+.Response 실례 화

let myResponse = new Response(body, init)

body

Blob

BufferSource

FormData

URLSearchParams

USVString

init

status

statusText

headers

Response 인 터 페 이 스 를 실 현 했 기 때문에 실례 화 body 시 호출 Response, Body.blob(), body.formData(), body.json(), body.text() 서열 화 반환 값 을 호출 할 수 있 고 반환 값 은 하나 Promise 이다.구체 적 인 실현 방법 은 다음 과 같다.

  var blobReader = new Response(blob).json()
  blobReader.then(res => {
      console.log(res)
  })

작은 매듭
서버 반환 값 을 분석 하 는 방법 이 있 습 니 다. 파일 을 다운로드 할 때 서버 반환 값 content-type 을 더 판단 할 수 있 습 니 다. 반환 값 이 blob 이 아니라면 사용자 정의 처 리 를 할 수 있 습 니 다.
참고 자료

Blob

FileReader

Response