条件に応じて保存できるHTMLファイルを変更したい

Question

前提・実現したいこと

HTMLのサイト上に資料を載せ、
状況に応じて資料の内容を変更したいと思っています。
チェックリストを押していったら最終的に結果が表示されます。
チェックによって表示される文言が変わり、画像つきで内容を保存できるようにしたいと思っています。
(最終結果は画像付きの表で出力されます)

例えば、「性別」「年齢」「身長」「体重」「運動量」のリストを選択していきます。
「女」「20代」「160cm台」「50kg台」「ほぼ動かない」と選択した場合
結果の表が勝手に出力され
美容体重かどうか、お勧めの食事は何か、お勧めの運動方法は何か、を自動で表示させたいのです。
選ぶ項目によって結果が変わるようにし、画像と共に保存できるようにしたいです。

試したこと

HTMLファイル上にTable表をつくり、
選択した条件に応じて特定行の表示/非表示を行います。
最終的には、画像含めてその表を保存してみようかなと思っています。
テーブルの一部分にclassまたはIDを設定し
disableかどうかを切り替えるようにしようかと思っています。

現在はとりあえず、ネット上で見かけたソースを利用し
以下のようにテキストデータで保存しています。

function download(){
var text = "<B>テキストデータ</B>";
var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。

// IEか他ブラウザかの判定
	if(window.navigator.msSaveBlob){
	    // IEなら独自関数を使います。
    	window.navigator.msSaveBlob(blob, "ファイル名.html");
		} else {
	    // それ以外はaタグを利用してイベントを発火させます
	    var a = document.createElement("a");
	    a.href = URL.createObjectURL(blob);
	    a.target = '_blank';
	    a.download = 'ファイル名.txt';
	    a.click();
		}
		URL.revokeObjectURL();//キャッシュ削除
}

アドバイス頂きたいこと

聞きたいのは３つです。
・HTML上に表示されるものをそのまま保存したい場合何が使いやすいか。

・結果を出力する場合、どの形式がいいか
スマホでも見れたら良いと思っています。やはりPDFでしょうか？

・表データの作り方
私以外も作れそうなものを考えています。
Wordで作ってHTML出力にするくらい簡単なものが良いと思っていますが難しいでしょうか。
Excelのマクロ組むのが一番かなぁ…。

・ほかにいい方法はありますでしょうか。
全ての組み合わせでPDFを作成し、それぞれ保存させればいいじゃないかって言うのも分かります。
資料が多いので、結構厳しそうですし、手直しも多いと思うので
なるべく編集可能なものにしたいと思っています。

以上、よろしくお願いいたします。

Comments

[mather]

「アイデアはあるけど実現する方法で迷っている」という質問と受け取りました。自分でいつくか解決案があるようなので、まずはご自身で作ってみてください。

[og24715]

コードを見る限り、IE だと .html、それ以外だと .txt ファイルをダウンロードしているように見えるんですがどういう意味があるんでしょうか？

[退会済みユーザー]

mather様　回答ありがとうございます。まずは資料作りからだと思いますが、最終的に上手く行くであろうことを決めてから行いたいと思っています。代案は無さそうという感じでしょうか…。誰も無いならこのまま進もうと思います。

[退会済みユーザー]

og24715様　修正し忘れてました。htmlにしたところで画像つきで保存できないため意味ありませんでした。最終的には画面を印刷する方法で行こうかなと思います。ただ、それが良いかはまた別の話ですかね……。

[KazuhiroHatano]

それはまあ、これを見ればわかるんでないでしょうか、https://caniuse.com/#search=download。しかしまあダウンロードさせるには.txtにする以外にないのはiOSだけって感じとは思うのでそこまで条件分岐をしてやったほうがいいとは思います

[KazuhiroHatano]

いや、downloadに入れてもiOSじゃよまれないから.htmlにしても問題ないはずなのか、なんで.txtにしてるんだろ？

[退会済みユーザー]

KazuhiroHatano様　全部htmlに書き換えるつもりが忘れてました。あと、最終的には画面を印刷する方法を検討する予定なので、使おうと思っていたものという過去のものとしてみてください。

[og24715]

？スルーでいいですか？

[KazuhiroHatano]

すいません、スルーで、download属性に対応してないiOSのためにhrefの拡張子を.txtにしてるとかと思ったんですが全くそんなんじゃなかったですね

[mather]

「資料作りをして最終的にうまくいくであろうことを決めてから」というと要件定義に対して設計を誰かに後押しして欲しいということを書いてるのと同じですよ。僕はこの場所はそういう質問の場所ではないと思っていますし、不安なのはわかりますが作る前に迷っていてもしょうがないのでまずは作り始めてはいかがでしょうか。うまくいかないとしても手を動かした時間は無駄にはならないと思います。

Answer 1

フロントで動的にファイルを生成するより、選択肢に応じて DOM を組んで、それをブラウザーの機能で PDF ダウンロードしてもらうのが一番早いと思います。
バックエンドで HTML から PDF 生成したりするのも考えましたがまあ無駄だなと。

Comments

[退会済みユーザー]

ありがとうございます。
やはり、上げた方法以外には特に無さそうだという事で良いみたいですね。
あとから効率の良い方法が出てきて修正をかけるのも大変なので……。
最後の保存画面も印刷画面にして、xpsまたはPDFで保存してもらおうと思います。
現在はExcelのVBAで表を自動的にHTMLソースに変換するものを作成中です。9割がた出来ました。
また何かあれば聞くかもしれません。