<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>local file save</title> </head> <body> <div id="content"> 〇〇君とプールに行って、一緒に泳ぎました。<br> 楽しかったです！ </div> </body> </html>
<div>タグで囲った文章をファイルに保存するボタンを設置します。始めに保存ボタンを追加します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>local file save</title> </head> <body> <div id="content"> 〇〇君とプールに行って、一緒に泳ぎました。<br> 楽しかったです！ </div> <input type="button" value="保存" onclick="save();"> </body> </html>
保存ボタンのonclickで指定した関数を、下記のようにコードを書きます。
<script>
function save(){
//<div id=”content”>で囲まれた箇所の文章を取得する
var content = document.querySelector("#content").innerHTML;
//取得した文章をtextファイルの形式に変換 content.trim()は文章の前後のスペースを削除
var blob = new Blob([content.trim()], {type : "text/plain"});
//ダウンロードリンクを付ける
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
//ダウンロードするファイル名を決めます
link.download = "file.txt";
//画面に一瞬だけダウンロードリンクを表示し、ファイルのダウンロードを行う
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>処理の流れは、 ・<div id="content">で囲まれているところの文章を取得して、テキストファイルに変換する
・ダウンロード用のリンクを一瞬だけ表示して、ダウンロードを開始する
上記のコードを書いた後に保存ボタンが動くか確認してみましょう。
0 件のコメント:
コメントを投稿