ASP.NET MVC & Ajax：파일 다운로드의 callback 설정하기

2017-05-01 13:02

ASP.NET MVC의 파일 다운로드에 대해

Controller에서 File값을 반환해서 location.href로 파일을 다운로드 합니다.

HomeController.cs

public ActionResult FileDownload()
{
	byte[] stream;
	string fileName;
	
	// 처리
	
	return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
}

js

location.href = 'http://myhome/Home/FileDownload';

위의 코드로 서버측에서 작성한 파일을 다운로드 하는것은 가능합니다.

하지만 파일의 작성 대기시간이 길어지면 유저 입장에서는 지금 시스템이 파일을 다운로드 하고 있는지 처리가 실패한것인지를 파일이 전부 작성된 다음에 로컬에 저장될때까지 알길이 없기 때문에 유저를 불안하게 만들 가능성이 있습니다. 또한 다운로드가 실패했다고 생각하여 처리 도중에 다른 행동을 취할 가능성도 있습니다.

그렇기 때문에 파일 다운로드 중에는 로딩 화면을 표시해서 파일 다운로드가 끝나면 로딩 화면을 감추는 처리를 했으면 좋겠다고 생각했습니다.

아래부터 파일 다운로드시의 callback 설정 방법입니다.

1. jquery.fileDownload를 도입

jquery.fileDownload.js Library

다운로드 jquery.fileDownload

필요한 파일은 「jquery.fileDownload.js」 하나만 있으면 됩니다.

2. Javascript

// 로딩 화면 표시 처리
$.fileDownload('http://myhome/Home/FileDownload', {
	successCallback: function (url) {
		// 로딩 화면 숨기기 처리
	},
	failCallback: function (html, url) {
		// 실패했을 때의 처리
	}
});

3. Controller

jquery.fileDownloadのCallback에는 아래의 Response 헤더의 설정이 필요합니다. 파일 다운로드시의 Response를 확인하여 설정값이 없을 경우엔 설정할 필요가 있습니다.

이번 케이스의 경우엔 「Set-Cookie」의 추가 설정만으로 정상적으로 Callback 처리가 되는 것을 확인했습니다.

Content-Disposition: attachment; filename=Report0.pdf
Set-Cookie: fileDownload=true; path=/

HomeController.cs

public ActionResult FileDownload()
{
	byte[] stream;
	string fileName;
	
	// 처리

	// Set-Cookie를 설정
	Response.AppendHeader("Set-Cookie", "fileDownload=true; path=/");

	return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
}

참고용 jquery.fileDownload 데모 사이트

jquery.fileDownload.js Demo

Pie's Tech Note

생계형 개발자의 메모장