programing

Axios 다운로드 파일(오른쪽 확장자)

bestcode 2022. 8. 18. 23:32
반응형

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 확장자로 다운로드되는 문제

블록 따옴표

파일 확장자를 얻을 수 있는 방법이 있나요? 여기에 이미지 설명 입력

서버가 스크린샷에 파일 확장자를 보내지 않았습니다.에 없으면downloadFileurl인수와 서버 응답을 수정할 수 없습니다.에서 추론할 수 있습니다.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

반응형