자바스크립트 Fetch API를 사용하여 다운로드 된 파일로부터 파일 이름을 얻는 방법은 무엇인가요?

public class FileResult : IHttpActionResult
{
   private string _fileText = ;
   private string _fileName = ;
   private string _contentType = ;
   public FileResult(string name, string text)
   {
       _fileText = text;
       _fileName = name;
       _contentType = text/plain;
   }
   public Task<HttpResponseMessage> ExecuteActionAsync(CancellationToken token)
   {
        Stream _stream = null;
        if (_contentType == text/plain)
        {
            var bytes = Encoding.Unicode.GetBytes(_fileText);
            _stream = new MemoryStream(bytes);
        }
        return Task.Run(() =>
        {
            var response = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(_stream),
            };
            response.Content.Headers.ContentType = 
                new MediaTypeHeaderValue(_contentType);
            response.Content.Headers.ContentDisposition = 
                new ContentDispositionHeaderValue(attachment)
            {
                FileName = _fileName
            };
            return response;
        }, token);

public class FileResult : IHttpActionResult
{
   private string _fileText = ;
   private string _fileName = ;
   private string _contentType = ;
   public FileResult(string name, string text)
   {
       _fileText = text;
       _fileName = name;
       _contentType = text/plain;
   }
   public Task<HttpResponseMessage> ExecuteActionAsync(CancellationToken token)
   {
        Stream _stream = null;
        if (_contentType == text/plain)
        {
            var bytes = Encoding.Unicode.GetBytes(_fileText);
            _stream = new MemoryStream(bytes);
        }
        return Task.Run(() =>
        {
            var response = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(_stream),
            };
            response.Content.Headers.ContentType = 
                new MediaTypeHeaderValue(_contentType);
            response.Content.Headers.ContentDisposition = 
                new ContentDispositionHeaderValue(attachment)
            {
                FileName = _fileName
            };
            return response;
        }, token);

편집

제 질문은 특히 fetch에 대한 것이었습니다. 또한, 제 코드에서는 이미 제안된 답변의 수락된 답변과 같은 방식으로 응답 헤더를 읽고 있음을 보여주었습니다. 그러나 제 글에서 언급한 대로 이 솔루션은 fetch와 함께 작동하지 않았습니다.

답변 1

그래서, 이 질문을 게시한 지 얼마 지나지 않아, Github에서 이 문제를 발견했습니다. 이 문제는 CORS 사용과 관련이 있는 것으로 보입니다.

제안된 해결책은 서버의 응답 헤더에 Access-Control-Expose-Headers:Content-Disposition를 추가하는 것입니다.

이 방법이 작동했습니다!

답변 2

JavaScript Fetch API를 사용하여 파일을 다운로드한 후 파일 이름을 가져오는 방법은 다음과 같습니다.
Fetch API는 비동기적으로 데이터를 가져오는 기능을 제공하는 자바스크립트의 내장 API입니다. 이를 사용하면 서버로부터 파일 데이터를 가져올 수 있습니다. 그러나 Fetch API는 기본적으로 파일 이름을 가져오는 기능을 제공하지 않습니다. 따라서 추가적인 처리가 필요합니다.
파일 이름을 가져오기 위해서는 먼저 Response 객체에서 헤더 정보를 확인해야 합니다. Response 객체는 fetch 메소드를 통해 반환되는 Promise 객체에서 얻을 수 있습니다. Response 객체에는 헤더 정보를 포함하고 있으므로, 여기에 파일 이름이 포함되어 있습니다.
해당 헤더 정보는 'content-disposition' 헤더에서 찾을 수 있습니다. 'content-disposition' 헤더에는 파일 이름과 함께 다른 정보도 포함될 수 있습니다. 하지만 파일 이름을 추출하기 위해서는 'filename=' 부분을 찾는 것이 중요합니다.
이를 구현하기 위해서는 다음과 같은 코드를 사용할 수 있습니다:
```
fetch('다운로드 URL')
.then(response => {
const contentDisposition = response.headers.get('content-disposition');
let filename = '';
if (contentDisposition) {
const filenameRegex = /filename[^;=\n]*=(([']).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(contentDisposition);
if (matches !== null && matches[1]) {
filename = matches[1].replace(/[']/g, '');
}
}
console.log(filename);
});
```
위의 코드는 fetch 메소드를 사용해 다운로드한 파일의 헤더 정보를 가져와 'content-disposition' 헤더에서 파일 이름을 추출합니다. 추출한 파일 이름은 'filename' 변수에 할당되며, 이후 사용자가 원하는 대로 활용할 수 있습니다.
이처럼 JavaScript Fetch API를 사용하여 파일을 다운로드한 후 파일 이름을 추출하는 방법에 대해 알아보았습니다. 이러한 방법을 활용하면 웹 애플리케이션에서 다운로드한 파일의 이름을 손쉽게 가져올 수 있습니다.