HTMLテーブルをフォーマット（ASCIIアート）のtxtファイルに保存

このようなJsonファイルの値を持つHTMLテーブルを作成しました。私はjsonデータをインラインにしていますし、いくつかのCSSを使ってテーブルを作成します。HTMLテーブルをフォーマット（ASCIIアート）のtxtファイルに保存

<style> 
table { 
width: 60%; 
line-height: inherit; 
text-align: left; 
} 
table td { 
padding: 5px; 
vertical-align: top; 
} 
table tr.top table td.title { 
font-size: 45px; 
line-height: 45px; 
color: #333; 
} 

</style> 
</head> 
<body> 

<div id="box"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script> 
<script type="mustache/x-tmpl" id="helloTmpl"> 

<h1>number {{number}}</h1> 
<table cellpadding="0" cellspacing="0" id="t01"> 
    <tr class="top"> 
     <td colspan="1"> 
      <table> 
       <tr> 
        <td class="title"> 

        </td> 
        <td> 
         Number #: {{number}} 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr class="information"> 
     <td colspan="1 "> 
      <table> 
       <tr> 
        <td>Name<br> 
         {{seller.name}}<br> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr></br> 

</table> 

</script> 

<script> 
    var data = { 
"number": "123", 
"seller": { 
    "name": "TestName" 
    } 
    }; 
var tmpl = document.getElementById("helloTmpl").innerHTML; 
var html = Mustache.to_html(tmpl, data); 
var box = document.getElementById("box"); 

box.innerHTML = html; 
</script>

ここで、私はcssでtxtファイルで使用したフォーマットでこのテーブルをダウンロードする必要があります。私はどのようにtxtファイルでそれを保存することができるのすべてを発見していない。また、どのようにしてフォーマット（css）を維持できるかわかりません。たぶん私はアスキーアートを使うべきですか？しかし、私はどのように接続することができないのか分かりません。誰も私を案内してくれますか？

出典

2017-12-21 marissalianam

が正確に何をしようとしますか？関連するすべてのCSSをインラインで作成している間に、テーブルを含むHTMLをいくつか保存したいのですか？あなたがすでに同じファイルにCSSとHTMLを持っているので、ファイルを保存すれば、次回の読み込み時にすべてのものが生成されます。あるいは、あなたは角かっこが適切な値で満たされているか、または保存したいでしょうか？ – DanteTheSmith

このhtmlページの出力は、フォーマットされたテーブルです。私が望むのは、このフォーマットされたテーブルをtxtファイルに保存することです。 – marissalianam

あなたが望むのは、現時点のHTMLを生成時に現行の値でダンプすることだけです。つまり、DOMをダンプすることに等しいか、むしろテーブルのDOMの一部です。あなたはクロームでこの手動簡単を行うことができます

：

のWebインスペクタ（F12）を使用して、右のコード内であなたのテーブルタグをクリックすると選択し、[要素]タブに移動「コピーとしてHTML '

それを新しいファイルに貼り付けて保存します。ファイルのテキストとして適切な値を持つテーブルが作成されました。

ファイルをHTML形式で保存してブラウザで開くと、テーブルが表示されます。ブラウザーによっては、htmlやbody要素を囲む必要があるかもしれません。

これを行うには、プログラムのを使用する場合は、HTML 5が必要で、いくつかのトリックを使用する必要があります。あなたは簡単にターゲットのみ表（例MYTABLEに）文書のダウンロードがクリックリスナーを追加起動するボタンを作ることができるように

function saveTextAsFile() { var textToSave = document.getElementById("myTable").innerHTML; var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = "generateNameHere"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; //downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); } document.getElementById("download").addEventListener("click", saveTextAsFile);

は（例ではidがダウンロードされる）あなたのテーブル同上を与えます。

ここCodepenは、いくつかの例の表である： codepen download table to a file

出典

2017-12-21 15:34:34 DanteTheSmith

はい、自動的にtxtファイルを作成します。私は Downloadのようなボタンを持ち、この機能を使ってtxtファイルを作りたいと思っています。 – marissalianam

ファイルを作成するには？ローカルのディスクに保存するか、サーバーに送信しますか？前者が頭痛、ブラウザのセキュリティ設定などを与える可能性があります。ブラウザはデフォルトでは、ユーザーがファイルを要求することなくディスクに保存することはできません。それをサーバーに送信してから別のボタンにダウンロードすることも可能です。 – DanteTheSmith

これは私ができる最高です。サーバーは必要ありません.HTML5 BLOB（古いブラウザでは動作しません）を使用し、これをリンクにバインドしてリンクをクリックします。ユーザーはまだファイルの保存を確認する必要がありますが、私はあなたがそれを回避することはできないと確信しています。それはセキュリティ上の問題です。 – DanteTheSmith

HTMLテーブルをフォーマット（ASCIIアート）のtxtファイルに保存

答えて

関連する問題