bottleでファイルをダウンロードした後に別ページに遷移させる

やったこと

ファイルをダウンロードした後に、別ページに遷移させるようにした。

当初、JavaScriptを用いて別ページに遷移させようとした。ただ、バックエンド側(Python)で、/downloadにアクセスしてファイルをダウンロードするようなコードを書いているので、
フロントエンド側(JavaScript)で別ページに遷移させようとしても正常に遷移できなかった。
(参考ページ)
JavaScriptで指定したURLにページ遷移する方法
inputタグ、buttonタグでの画面遷移の記述について

なので、JavaScript(フロントエンド)側で、ダウンロードボタンをクリックした後、/downloadに遷移するコードを追加した。
また、バックエンド側で、/downloadにアクセスするとファイルをダウンロードするコードを書いていたので、
bottleのルーティングで、

  • Postで/downloadにアクセスしたときは、ファイルのダウンロード
  • Getで/downloadにアクセスしたときは、別ページに遷移

するように、バックエンド側のコードを変更した。
Getで/downloadにアクセスしたときは、別ページに遷移させるために、
PythonでCookieを発行し、JavaScriptでそのCookieを読み取ることで、別ページに遷移できるようにした。
(参考ページ)
javascriptでダウンロード終了を検知する

ファイル構成

ファイルのダウンロード後の遷移先ページとして、「complete.html」のテンプレートを追加した。

.
├── form.py
├── views
│  └── base.html
│  └── form.html
│  └── complete.html
│  └── form_failed.html
│  └── 404.html
└── static
  └── main.js

作成コード

(バックエンド側)
ルーティングの変更(GETで/downloadにアクセスしたときのコードを追加)

@get('/download')
def download():
    title = "ダウンロード完了"
    return template('complete.html', title = title)

 

Cookieの送信

    # ダウンロードボタンを押したときに別ページに遷移させるためにCookieを発行
    response.set_cookie("downloaded", "yes", max_age = 15552000)
    return response

(参考ページ)
Cookieを使う – bottle

(フロントエンド側)
遷移後のページを追加

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>TogglのデータをCSV形式でダウンロードするツールです。</h1><br>
	<h2>ファイルのダウンロードが完了しました。</h2>
	<h3>5秒後に自動的にトップページに移動します。</h3><br>
</div>

<script>
	// 5秒後に自動的にトップページに戻る
	setTimeout(function(){
	window.location.href = '/';
	}, 5*1000);
</script>

{% endblock %}

 

ダウンロードボタンを押したときに、Cookieを読み取り、完了ページに遷移するコードを追加

// ダウンロードボタンを押したときに、Cookieを受け取り、完了ページに遷移させる
document.getElementById("download").onclick = function(){
	setTimeout(function () {
		//データを1つずつに分ける
		var r = document.cookie.split(';');

		//cookie名と値に分ける
		r.forEach(function(value) {
			var content = value.split('=');
			var name = content[0];
			var value = content[1];
			if(name == "downloaded" && value == "yes"){
				location.href="/download";
				console.log("Cookieあるよ");
				
				// Cookieの削除
				//日付データを作成する
				var date1 = new Date();				
				//1970年1月1日00:00:00の日付データをセットする
				date1.setTime(0);
				//有効期限を過去にして書き込む
				document.cookie = "downloaded=yes;expires="+date1.toGMTString();
			}
			else{
				console.log("Cookieないよ");
			}
		})
	}, 3000);
}

(参考ページ)
cookieのデータを取得する方法
JavaScript で Cookie を扱う
cookieデータを削除する
JavaScriptでsetIntervalを使う方法【初心者向け】

実行結果

フォーム画面

ボタンを押すと、ファイルがダウンロードされる

ダウンロード完了画面

つまづいたところ

jQueryで、Cookieの操作ができるプラグイン(jquery.cookie.js)があるとのことなので使ってみたが、動かなかった。
(参考ページ)
ファイルダウンロード完了後に画面遷移などをjavascriptで行う
jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う

不具合内容

jQueryが動かなかった。

原因

不明。Cookieの操作ができるプラグイン(jquery.cookie.js)が開発終了しているとのことで、古くなっているため動かなかったのでは。

解決策

なし。
Cookieの操作ができるプラグイン(jquery.cookie.js)は、js-cookieというプラグインに移行しているらしい。
(参考ページ)
【2018年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理

やってみた感想

jQueryのプラグインが動かないという、予想外のことが起こり、一時はどうなるかと思ったが、結果なんとかなった。
実際の開発でも、こういうものなのだろう。
どうやってエラーを回避するのかを考えるのもエンジニアの仕事。

コメント

タイトルとURLをコピーしました