みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

<textarea>に入力した文章をtxtで保存。

<form>の<textarea>に入力した文章をtxt形式に変換してデスクトップに保存する方法はあるでしょうか?
テキストエリアに入力⇒リンクorボタンをクリックすれば、txt形式で保存またはダウンロードできるようなタグやJavascriptがあれば教えてほしいです。

投稿日時 - 2013-07-02 20:58:59

QNo.8159645

暇なときに回答ください

質問者が選んだベストアンサー

a要素のdownload属性に対応しているブラウザなら任意の名前を付けて保存させることができます。
現在Chrome、Firefox等が対応しています。

また、対応してない環境でもリンクを右クリックして保存をさせることはできます。
当然古いIE等はこの方法でも無理ですが。

その処理例を書きました。


<!DOCTYPE html><html><head><script>

function TextSave() {
//文字を取得
var text = document.getElementById('text').value
//ファイル名を取得、デフォルトは「mytext」
var name = document.getElementById('name').value || 'mytext'

//テキストファイルを作成
var blob = new Blob( [text], {type: 'text/plain'} )

//リンクを取得
var link = document.getElementById('DL_link')
//リンクにダウンロードするファイルをセット
link.href = window.URL.createObjectURL(blob)

//もしダウンロード属性に対応していたら
if ('download' in link){
//リンクにダウンロードする名前をセット
link.download = name + '.txt'
//リンクをクリックしてダウンロードさせる
link.click()

//もし対応してなかったら
} else {
//メッセージを表示する
link.textContent = '右クリックから名前を付けて保存してください'

}

}

</script></head><body>

文字:<textarea id="text"></textarea><br>
ファイル名:<input id="name" placeholder="mytext">.txt<br>
<button onclick="TextSave()">保存</button><br>
<a id='DL_link'></a>

</body></html>

投稿日時 - 2013-07-03 02:30:59

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

HTMLとJavaScriptだけではローカルマシンの情報にアクセスすることはできません。
(ファイルを読んだり書いたりできたら、悪意のあるページにアクセスしただけでそのマシンが乗っ取られちゃいますよね。)

なので、まっとうなやり方は
・いったんtextareaの中身をサーバーに送信する
・サーバー側のプログラムで処理を行い、テキストファイルをダウンロードさせるようなレスポンスを返す
という形になります。
なので、サーバー側でリクエストを受け取る仕組み(CGIなど)が必要になりますね。


なお、WindowsのIE限定でJavaScriptからマシンのクリップボードにアクセスすることはできるので、そこにtextareaの中身をコピーするという手はあります。
とはいえその後ユーザーがメモ帳などを開いて貼り付ける必要があるので、あまり手間は変わりませんが…。

書き方としてはこんな感じになります。
(すみません、動作確認は行っていないので「おそらく動くだろう」のレベルですが)


[JavaScript]
- - - - - - - - - - - - - - - - - - - - - - - - - -
function setClipboardData()
{
var text1 = document.getElementById("text1").value;
clipboardData.setData("Text", text1);
}


[HTML (要点のみ)]
- - - - - - - - - - - - - - - - - - - - - - - - - -
<textarea id="text1" cols="60" rows="10"></textarea>
<button onClick="setClipboardData();">

投稿日時 - 2013-07-02 21:22:43

あなたにオススメの質問