반응형
Axios 다운로드 파일(오른쪽 확장자)
다운로드 파일의 vuex 방법은 다음과 같습니다.
downloadFile(context, url) {
return new promise((resolve, reject) => {
const method = "GET";
axios
.request({
url: url,
method,
responseType: "blob"
})
.then(response => {
let fileURL = window.URL.createObjectURL(
new Blob([response.data]),
{
type: response.headers["content-type"]
}
);
let fileLink = document.createElement("a");
fileLink.href = fileURL;
let fileName = response.headers["content-disposition"].split(
"filename="
)[1];
fileLink.setAttribute("download", fileName);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove();
resolve();
})
.catch(() => {
reject();
});
});
}
URL 링크 전달(laravel API에서 가져오기)
블록 따옴표
파일이 항상 txt 확장자로 다운로드되는 문제
블록 따옴표
서버가 스크린샷에 파일 확장자를 보내지 않았습니다.에 없으면downloadFile
의url
인수와 서버 응답을 수정할 수 없습니다.에서 추론할 수 있습니다.Content-Type
. 각 콘텐츠 유형을 확장자에 연결하는 해시를 만들 수 있습니다.
삭제:
let fileName = response.headers["content-disposition"].split(
"filename="
)[1];
확장 기능을 캡처하려면 다음과 같이 대체합니다.
const extensions = {
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
'application/fake': 'fake', // Just an example
// etc. Add another line for every Content-Type
}
const contentType = response.headers["Content-Type"];
const extension = extensions[contentType];
const filename = 'file.' + extension;
모든 파일의 이름이 "file"로 지정됩니다.<br>"
엔드포인트가 확장을 제공하지 않는 경우 에서 해당 확장을 추가할 수 있습니다.fileName
다음과 같은 경우가 있습니다.
- fileLink.setAttribute("download", fileName);
+ const extention = 'pdf'; // example
+ fileLink.setAttribute("download", `${fileName}.${extention}`);
언급URL : https://stackoverflow.com/questions/64941975/axios-download-file-with-original-right-extension
반응형
'programing' 카테고리의 다른 글
VueJ를 통해 DOM 요소 선택s (0) | 2022.08.18 |
---|---|
C에 부호 없는 포화 덧셈을 어떻게 하나요? (0) | 2022.08.18 |
Java 어소시에이션 어레이 (0) | 2022.08.18 |
컴포넌트 내 믹스인 콜방식(Vuej) (0) | 2022.08.18 |
"Assert" 기능은 무엇입니까? (0) | 2022.08.18 |