メニュー

小金井にあるWEB制作会社の備忘録

MEMORANDUM

PDFファイルをダウンロード後に完了ページに遷移させる

PHPを使用してPDFファイルを動的にダウンロードしたところ、「header」関数でのリダイレクトができなくなってしまったため「cookie(クッキー)」とjavascriptを併用して対応した方法をメモ

HTML

<form action="download.php" method="post">
<input type="hidden" name="download__token" value="xxxxxxxxxx">
<dl>
<dt>メールアドレス</dt>
<dd><input type="text" name="email" placeholder="例)mail@example.com"></dd>
</dl>
<div class="btnSubmit"><input type="submit" name="download" value="送信する"></div>
</form>

download.php(PHP)

if(!empty($_POST['download'])){
	
	//値の取得処理とバリデーションを記載
	
	if(empty($err_msg['error'])){
		//クッキーを設定
		setcookie('downloaded', '○○○○', time()+60*60, '/');

		//ファイル名
		$filename = '○○○○.pdf';
		//ファイルのパス
		$filepath = dirname(__FILE__).'/'.$filename;
				
		header('Content-Type: application/octet-stream');
		header('Content-Disposition: attachment; filename="'.rawurlencode($filename).'"');
		header('Content-Length: '.filesize($filepath));
		ob_end_clean();
		readfile($filepath);
	}else{
		header('location:'.$_SERVER['HTTP_REFERER']);
	}

}

jQuery(javascript)

$('form').submit(function() {
	setInterval(function(){
		if(document.cookie){
			//クッキーを配列に収納
			var params = document.cookie.split(';');
			var array = {};
			for(i = 0; i < params.length; i++){
				var term = params[i].split('=');
				var key = term[0].trim();
				var value = term[1] ? term[1].trim() : '';
				array[key] = value;
			}
				
			if(array['downloaded']){
				//クッキーの削除処理
				document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
				window.location.href = '完了ページのURL';
			}
		}
	}, 1000);
});

今回はメールアドレスを取得したのちにPDFをダウンロード可能にする仕様のため、フォーム(HTML)にはメールアドレスの入力項目を設置。
フォームの受け取り処理でバリデーションを実行し、エラーの無い場合に「setcookie」関数を使用してクッキーを設定(変数名:downloaded)
javascriptの「setInterval」を使用し1秒毎に、クッキーの値を判定して、条件に合った時のみ完了ページに遷移させています。

尚、jquery側で入力チェックを行う名う場合は下記

jQuery(javascript)

$('form').submit(function() {
	var error = [''];

	if($('input[name="email"]').val() ==''){
		error[1] = 'メールアドレスを入力してください\n';
	}else if(!$('input[name="email"]').val().match(/^[a-zA-Z0-9_\.\-]+@(([a-zA-Z0-9_\.\-]+\.)+[a-zA-Z0-9]+$)/)){
		error[1] = 'メールアドレスを正しく入力してください\n';
	}
		
	var errors = '';

	for( a = 0; a < 1; a++){
		if(error[a].length > 0){
			errors = errors + error[a];
		}
	}

	if(errors.length > 0){
		alert(errors);
		return false;
	}

	setInterval(function(){
		if(document.cookie){
			//クッキーを配列に収納
			var params = document.cookie.split(';');
			var array = {};
			for(i = 0; i < params.length; i++){
				var term = params[i].split('=');
				var key = term[0].trim();
				var value = term[1] ? term[1].trim() : '';
				array[key] = value;
			}
				
			if(array['downloaded']){
				//クッキーの削除処理
				document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
				window.location.href = '完了ページのURL';
			}
		}
	}, 2000);
});

入力チェックの処理時間を考慮して「setInterval」の実行を2秒後にしています。

RANKING

人気記事

同一カテゴリーの記事