14

Javascript は、ブラウザーが表示しているドキュメントを操作できるため、次のようになります。

<script>
    document.write("<table><tr><td>Hola</td><td>Adios</td></tr></table>");
</script>

元の HTML ドキュメントであるかのように、ブラウザーにテーブルを表示させます。

<table>
    <tr>
        <td>Hola</td>
        <td>Adios</td>
    </tr>
</table>

この文書の内容を保存/提供する方法はありますか?

現在、Ext-js を使用して適切に生成されたレポートがいくつかあります。私がやりたいのは、その "text/html" バージョン (つまり、javascript を必要としないもの) です。

したがって、ページの最後にボタンを追加します:「ブラバとして保存」すると、ドキュメントはテキスト/プレーンバージョンを表示するはずです。

私が今考えることができる唯一の方法は、コンテンツを次のような JavaScript 変数に書き込むことです。

 var content = document.toString(); // or something magic like that.
 // post it to the server

次に、その値をサーバーにポストし、サーバーにその値を提示させます。

 <%=request.getParameter("content-text")%>

しかし、非常にトリッキーに見えます。

代替手段はありますか?

編集

わかりました、ほとんどわかりました。新しいウィンドウをポップアップ表示する必要があるので、「保存しますか?」というオプションが表示されます。

これは私がこれまでに得たものです

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('application/vnd.ms-excel');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

この線:

    var oNewDoc = document.open('application/vnd.ms-excel');        

新しいコンテンツ タイプを指定する必要がありますが、無視されています。

4

11 に答える 11

7

でクライアント側に保存されていない限り、File -> Save Page As...提案していることを正確に実行$('body').html()し、サーバーに投稿してテキストとして処理する必要があります。

于 2009-09-25T19:04:29.230 に答える
4

これは、テーブルの内容を.xls形式で開くためのアップグレードバージョンです。

<head>
<script>

         document.write("<table id='targetTable'><tr><td>Hola</td><td>Adios</td></tr><tr><td>eins</td><td>zwei</td></table>"); 
        function saveAsXLS()
        {
            var xlObj = new ActiveXObject("Excel.Application");
            var xlBook = xlObj.Workbooks.Add();
            var xlSheet = xlBook.Worksheets(1);
            for (var y=0;y<targetTable.rows.length;y++) // targetTable=id of the table
            {
                for (var x=0;x<targetTable.rows(y).cells.length;x++)
                {
                    xlSheet.Cells(y+1,x+1)=targetTable.rows(y).cells(x).innerText;
                }
            }   
            xlObj.Visible=true;
            document.write("The table contents are opened in a new Excel sheet.");//Print on webpage 
        }
</script>
</head>
<body>  
<input type="button" value="Open table in Excel!" onclick="saveAsXLS()"/> 
</body>

このコードはIE6でテストされており、ActiveXObjectコントロールを使用しています。

  • ここで使用したテーブルは2x2のオーダーで、個々のコンテンツはそれぞれExcelシートにマップされています。
  • .docバージョンとは異なり、これはクライアントのシステムにファイルを保存しません。テーブルの内容でアプリケーションを開き、クライアントはそれを保存する必要があります。

これがあなたの質問に答えるのに役立つことを願っています。Lemmeは、uが問題に直面しているかどうかを知っています。

平和。

于 2009-10-22T09:38:51.740 に答える
3

ブラウザーのサポート要件によっては、データ URIを使用できます。

概念実証のためのコア (Firefox 3.5.3 でテスト済み):

document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
function extract(){
  return document.getElementById('content').innerHTML; 
}
function dataURI(s){
  return 'data:application/vnd.ms-excel;base64,' + encode64(s);
}
document.write('<a href="' + dataURI(extract()) + '">open</a>');

オンラインの例からbase 64エンコード/デコードを取得しました。注意: 私がつかんだものには、base 64 エンコードの前に URI エンコードが含まれていたため、しばらくの間、混乱しました。

于 2009-10-22T04:36:48.277 に答える
2

あなたは私が考える答えに近づいています。問題は、' ' が'text/html'、'text/plain' などの標準的な MIME タイプしか使用document.open(...)できないことです。

そのため、コードは次のようになります。

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('text/html');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

お役に立てれば。

于 2009-10-17T11:09:18.630 に答える
2

$(function(){
    $('.bbutton').click(function(){
        var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html() )
        location.href=url
        return false
    })
})
.table{background:#ddd;border:1px solid #aaa;}
.table thead th{border-bottom:1px solid #bbb;}
.table tr td{background:#eee;border-bottom:1px solid #fff;
  border-left:1px solid #ddd;text-align:center;}
.table tr:hover td{background:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='tableWrap'><table style='width:98%;box-shadow:none;' class='table'>
<thead><th>id</th><th>Name</th><th>Address</th></thead>
  <tr><td>1</td><td>Jyoti Telecom Services</td><td>http://www.tsjyoti.com</td></tr>
  <tr><td>2</td><td>Recharge</td><td>http://recharge.tsjyoti.com</td></tr>
  <tr><td>3</td><td>Bhuri Bharaj</td><td>http://bhuribharaj.tsjyoti.com</td></tr>
  </table></div>

<p>Your download's ready as Excel Sheet <a href='#'class='bbutton'>Click Here for download</a></p>

于 2014-09-18T03:10:14.623 に答える
1

JavaScript によって生成されたコンテンツ [クライアント側] をローカルの C: ドライブに MSWord[.doc] 形式で保存するコードを次に示します。

<script>

    document.write("<div id='content'><table><tr><td>Holaa</td><td>Adiosa</td></tr></table></div>"); 
    function saveAs()
        {
            var wordObj=new ActiveXObject("Word.Application");
            var docText;
            var obj;
            var textToWrite = document.getElementById('content').innerHTML;
            if (wordObj != null)
            {
                wordObj.Visible = false;
                wordDoc=wordObj.Documents.Add();
                wordObj.Selection.TypeText(textToWrite);
                wordDoc.SaveAs("C:\\Eureka.doc");
                wordObj.Quit();
                document.write("The content has been written to 'C:\\Eureka.doc'");//Print on webpage 
            }
        }
</script>

<body>

<input type="button" value="Save in C:" onclick="saveAs()"/> 

</body>

私はすぐにあなたの問題に取り組み、このコードを思いつきました。あなたの問題を正しく理解できたことを願っています。

私のコードの制約は

  • ファイル形式は .xls ではなく .doc です。
  • 第二に、ファイルは静的な場所に保存され、ユーザーが指定した場所ではありません[最適化できます]。
  • また、コードはActiveXを使用しており、サーバーサイド環境での動作は確認していません。

これらは、今後のバージョンで対処する必要があります。(:

平和。

于 2009-10-21T14:26:05.553 に答える
1

HTMLをサーバーに送信するのが難しい解決策だとは思いません。このファイルをダウンロードするためのリンクをユーザーに提供することを忘れないでください。これは、従来の POST または AJAX を使用して実行できます。ページの場合、ユーザーにどのように対話してもらいたいかによって異なります。

従来の投稿を使用すると、すべての html コンテンツを、ページに隠されている「html_content」などの名前の入力タイプの値属性に入れることができ、ユーザーが「保存」ボタンをクリックすると、ユーザーが別のページに送信されます。リンクのあるページはファイルを実行します。html をサーバーに送信すると、スクリプトが一意の名前でファイル システムにファイルを作成し、ダウンロード リンクを返します。

AJAX を使用すると、この変数を渡す AJAX POST を実行するだけで、スクリプトがダウンロード リンクを返し、「クライアント側のみ」のようにページをリロードせずに動的に HTML に配置できます。

どちらの方法でも、ファイル システムに作成したばかりのリソースへのリンクが html 拡張子付きで返されます。衝突を避けるために、生成されたファイルごとにサーバーで一意の名前を生成することを忘れないでください。

ただし、IE 6 で innerHTML を使用すると (これが IE ファミリの動作なのか、6 バージョンだけなのかわかりません)、すべてのタグが大文字になり、属性から引用符が削除されることに注意してください。HTML で後処理を行う予定がある場合は、注意してください。

このような状況で jQuery や他の JS ライブラリがどのように動作するかはわかりません。私たちが使用するこれらすべてのハッキングを抽象化するためのブラウザ互換性チェックがたくさんあります.

于 2009-10-21T05:29:25.200 に答える
1

単なるレポートの場合は、サーバーサイド JavaScript を使用して生成し、必要な MIME タイプで提供できます...

于 2009-10-20T20:46:20.940 に答える
0

Ext JSを使用しているので、グリッドにデータを提供するStoreオブジェクトがあるのではないでしょうか。ストアをウォークスルーすることで必要なデータを抽出し、必要な方法でフォーマットできるはずです。生成されたHTMLからデータをスクレイピングするのは理想的ではないと思います。

グリッドから必要なデータを取得してテキストにフォーマットしたら、それをバックエンドにPOSTしてダウンロードを開始できます(Content-Disposition:添付ファイルなどを使用)

クロスブラウザであることに関心がない場合は、data:URLスキームを使用して、バックエンドを使用せずにダウンロードを開始することもできます。

于 2009-09-25T19:24:20.800 に答える
0

サーバーから document.writeln() コンテンツを取得する JavaScript AJAX ですか、それともページがユーザーに提供されるときにそのコンテンツを既に生成していますか? 前者の場合、使用しているサーバー側のテクノロジーのセッションで変数/クエリを保存できず、それらからプレーンテキストのものを生成できない理由がわかりません。それ以外の場合は、上記の voyager の提案に従う必要があります。

于 2009-09-25T19:05:24.827 に答える
0

このプラグインはその仕事をします。IE、FF、Chrome でテスト済み。 https://github.com/dcneiner/Downloadify

于 2013-08-23T17:40:26.183 に答える