2014-01-08 9 views
5

私は数日間このことを研究してきましたが、決定的なものは考えていません。私はCoverItLiveのようなものを支払うつもりはないので、(非常に)初歩的なライブブログ設定を作成しようとしています。私のプロセスは次のとおりです:ローカルHTMLファイル>コンテンツページのクラウドストレージ(Dropbox/Drive/etc)> iframeそれだけでなく、いくつかのCSSを使っても、それほど素晴らしいことではないにもかかわらず、かなり素晴らしいものに見えます。ライブブログ自体はHTMLテーブルで構成されています。新しい行のコードを手動でコピー/ペーストし、タイムスタンプを記入し、新しいメッセージを書き、ドキュメントを保存する必要があります。雲はiframeに現れます)。プロセスを簡略化するために、を実行し、テーブルに自動的にエントリを追加するために使用する別のHTMLファイルを作成しました。現時点では、タイムスタンプを自動化し、入力データからテーブル行を書き込むための入力ボックスとJavaScriptの束です。javascript(* local * .htmlページで実行)で生成された.htmlファイルをローカルで保存するにはどうすればよいですか?

コード、それが今立っているよう:私はここから行うことを探しています何http://jsfiddle.net/LukeLC/999bH/

は何とか私のハードドライブ上の別の.htmlファイルに生成されたテーブルのデータをエクスポートする方法を見つけることです。これまでのところ私は、新しいウィンドウにだけ生成されたテーブルコードを開くために...

if(document.documentElement && document.documentElement.innerHTML){ 
     var a=document.getElementById("tblive").innerHTML; 
     a=a.replace(/</g,'&lt;'); 
     var w=window.open(); 
     w.document.open(); 
     w.document.write('<pre>&lt;tblive>\n'+a+'\n&lt;/tblive></pre>'); 
     w.document.close(); 
     } 
    } 

...このコードを取得するために管理してきたが、確かに、私はそこからソースを保存することができますが、全体のポイントそのようなステップをプロセスから排除することです。

[送信]ボタンをクリックすると、生成されたコードを別の.htmlファイルに保存する方法を教えてください。この場合も、これはサーバー上ではなくローカルで行われます。

私はjavascriptではあまりよくありません。おそらく別の言語が必要になるかもしれませんが、どんな助けでも大歓迎です。

答えて

4

var myHTMLDoc = "<html><head><title>mydoc</title></head><body>This is a test page</body></html>"; 
var uri = "data:application/octet-stream;base64,"+btoa(myHTMLDoc); 


document.location = uri; 

ところで、btoaはクロスブラウザではないかもしれませんが、私は最近のブラウザすべてがそれを持っていると思うが、IEの古いバージョンにはありません。 AFAIK base64は必要ありません。あなたはこれで

var uri = "data:application/octet-stream,"+myHTMLDoc; 

欠点で逃げることができるかもしれない、それがブラウザに

+0

これはほとんど私が望むことです - 私はそれが私がそれを必要とするすべてが含まれていることを確認するために少しコードを使いこなす必要があります。私はすべての投稿に新しいウィンドウを開く必要はありませんし、保存ダイアログを処理する必要はありませんが、これらのことが手助けできなければ、手動ですべてを行うよりはるかに優れています。 – LukeLC

+3

'a'要素を作成し、そのhrefをdata-URIに設定し、download属性をファイル名に設定すると(@ Pogrindisのように)、保存名を変更する方法を考え出したことにも触れておきます。それをDOMに追加し、 '.click()'を呼び出します。 (FFとクロムでテスト済み) – raser

+0

これはまだ動作していますか?私はIE11でそれをテストしましたが、 "データ"を開くためにどのプログラムを使うべきか尋ねます。そして、私がそれを保存しようとすると、それは保存することができないと言います。 – Kosmos

1

簡単な答えはできません。 JavaScriptは、セキュリティ上の理由により、このような操作を実行するように制限されています。

これを達成する最良の方法は、サーバー上の新しいファイル を書き込むサーバーページを呼び出すことです。次にjavascriptから、新しいファイルに書き込むデータを渡してサーバーのページ にPOSTリクエストを実行します。

あなたは、ユーザーがそれのファイルシステムにページを保存したい場合は、これは異なる 問題であり、それを達成するための最良のアプローチになり、ページを保存するために彼に を尋ねる/ユーザに通知する、そのページあなたがしているような新しいウィンドウをw.open()にすることができます。

私はあなたのためにいくつかのデモをやってみましょう:サーバー側で

//assuming you know jquery or are willing to use it :) 
    var html = $("#tblive").html().replace(/</g, '&lt;'); 

    //generating your download button 
    $.post('generate_page.php', { content: html }) 
     .done(function(data) { 
      var filename = data; 

      //inject some html to allow user to navigate to the new page (example) 
      $('#tblive').parent().append(
       '<a href="'+filename+'">Check your Dynamic Page!</a>'); 

      // you data here, is the response from the server so you can return 
      // your new dynamic page file name here. 
      // and maybe to some window.location="new page"; 
     }); 

、このような何か:

<?php 
    if($_REQUEST["content"]){ 
     $pagename = uniqid("page_", true) . '.html'; 
     file_put_contents($pagename, $_REQUEST["content"]); 
     echo $pagename; 
    } 
?> 

いくつかの注意、私は例をテストしていませんが、それはで動作します理論。 私はこれを実装する努力は、あなたの問題を解決すると仮定して最小限に抑えるべきだと考えています。

+0

のJavascript *を保存されますときにファイル名を設定することができないということである*という制限があります。 – Joe

+0

これは私のハードドライブからすぐ走っているように、すべてローカルです。私は、サーバー環境を設定してWindows内で実行しているわけではありません。Firefoxで開かれた簡単な古いHTMLファイルです。私はjavascriptが通常このようにファイルをエクスポートすることから制限されていることを知っていますが、おそらくクライアントとサーバーは基本的に同じであるので、私はチャンスを持つ可能性があります。ソリューションは厳密にjavascriptベースである必要はありませんが、可能であれば、この1つのローカルHTMLファイル内ですべて機能するようにしたいと思います。 – LukeLC

+0

制限は、ブラウザとすべての主要なブラウザで課されます。それは制限されていると思うほど愚かで、可能な限り回避することはできません。あなたがFirefoxのユーザー設定を変更するための特権の調整を開始しない限り...しかし、私はあなたにそれをすることを非常にお勧めします。それは簡単ではない。 –

2

あなたはjavascriptでこれを行うカントができますが、対話を保存開くためにHTML5のリンクを持つことができます。

<a href="pageToDownload.html" download>Download</a> 

あなたがPOST後に処理ページ上でそれを自動化するために、いくつかの知性を追加することができます。

フィドル:http://jsfiddle.net/ghQ9M/

+0

downvoteの理由は何ですか? – Pogrindis

-1

サーバーベースのソリューション:

あなたは、あなたのブラウザを伝える代わりに、ページをダウンロードするには、ヘッダーを使用してHTMLページを提供するために、サーバ(またはお使いのPC)を設定する必要がありますHTMLマークアップを処理します。ローカルマシンでこれを行う場合は、WAMP(Macの場合はMAMP、Linuxの場合はLAMP)などのソフトウェアを使用できます。これは、基本的に.exeのWebサーバーです。それは多くの面倒ですが、それは動作します。私はあなたがこのような何かができたとし

関連する問題