티스토리 뷰
Axios 를 통해서 파일 다운로드 하기.
//response blob or arraybuffer
this.$axios({
method: 'post',
url: url,
responseType: 'blob',
data: paramter
}).then(res => {
//header content-disposition에서 filename 추출.
const name = res.headers['content-disposition'].split('filename=')[1]
//IE11에서 blob처리 오류로 인해 분기처리
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
const blob = res.data
window.navigator.msSaveOrOpenBlob(blob, name)
} else {
//IE 이외 다운로드 처리
const url = window.URL.createObjectURL(new Blob([res.data], { type: res.headers['content-type'] }))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', name)
document.body.appendChild(link)
link.click()
delete link;
}
}).catch(error => {
//error
})
axios에서 blob (블롭) 을 이용하여 파일다운로드 구현 할 수 있다.
blob은 IE10 이상에서 지원된다.
developer.mozilla.org/ko/docs/Web/API/Blob
※ reseponse.header에서 Content-Disposition 객체를 찾을 수 없을 떄.
CORS 때문에 헤더에 Contents-Disposition내 filename이 있어도 값을 사용할 수 없을 수 있다.
해당의 경우 서버에서 allow-content-expose-headers 를 추가하여 사용할 수 있다.
//php
header('Access-Control-Expose-Headers: Content-Disposition');
//java
@RestController
@RequestMapping("/api/files")
@CrossOrigin(value = {"*"}, exposedHeaders = {"Content-Disposition"})
public class FileBoundary {
// code ...
}
//node
app.use(cors({
origin: 'http://localhost:8080',
credentials: true,
exposedHeaders: ['Content-Disposition']
}))
참조 : 1004lucifer.blogspot.com/2019/04/axios-response-headers-content.html
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- 자바스크립트
- 정규식
- Laravel
- django
- l5-swagger
- 메일
- MySQL
- bitwarden-cli
- addMonth
- 테스트_다중트랜잭션
- graphql-php
- php-laravel
- session+token authorize
- 정의
- observer 매개변수 전달하기
- laravel-kafka
- graphql
- laravel-test
- password-manager
- vim
- redis
- l5-swagger-response
- addMonthWithoutOverflow
- 라라벨
- aaa패턴
- eloquent-observer
- exception-test
- php
- Python
- POP3
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함