web-dev-qa-db-ja.com

div内のソースコンテンツをtext / htmlファイルにエクスポートする方法

<div id="main"> ... Some html ...</div>があり、このdiv内のhtmlコードを取得してファイル内に配置し、TXT形式で強制的にダウンロードする必要があるとします。どうすればできますか？ PHPまたはJavascriptを使用する必要がありますか？私はむしろJavaScriptです。

javascriptphphtmltextexport
10
023023

次のようなものを使用できます：

ダウンロードbtn（jquery）で更新されたjsfiddle

プレーンjsと自動実行を備えた初期jsfiddle

html

<div id="main">
    <span>Hey there</span>
</div>

html-編集（このアクションを実行するためのリンクを追加しました）

<a href="#" id="downloadLink">Download the inner html</a>

Js

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'tags.html'; // You can use the .txt extension if you want

JS-編集

コメントでjQueryを使用していると言ったので、この関数を直接呼び出すのではなく、ハンドラーから呼び出します。

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'main','text/html');
});

テキストとしてダウンロードし、関数の3番目の引数を削除するだけで、デフォルトの「text/plain」が取得され、htmlではなく拡張子.txtがファイル名に追加されます。

注私はこの回答を編集しました。質問した人が、ハンドラでそれを動作させる方法を探しているとコメントしたので、彼はそれを動作させましたが、場合。オリジナルのコードはjsfiddleにあります

30
Zagen

意図したことは、JavaScriptメソッドで実現できます。次の関数を使用すると、テキストファイルのダウンロードに使用するパーソナライズされた名前を追加できます。

function saveTextAsFile()
{
    //inputTextToSave--> the text area from which the text to save is
    //taken from
    var textToSave = document.getElementById("inputTextToSave").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    //inputFileNameToSaveAs-->The text field in which the user input for 
    //the desired file name is input into.
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    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();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}

上記は here から導出されました。

4
user6798473

Zagen関数の更新。オリジナルはIE 10-11：

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    if (navigator.msSaveBlob) { // IE 10+ 
        navigator.msSaveBlob(new Blob([elHtml], { type: mimeType + ';charset=utf-8;' }), filename);
    } else {
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';

        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
        link.click(); 
    }
}
1
cratu

これが私の完全なコードです、同じ状況の誰かに役立つことを願っています

<!-- SAVE AS HTML OR TXT FILE -->
    <script type="text/javascript">


            // Wait for the page to load first
            window.onload = function() {

              //Get a reference to the link on the page
              // with an id of "exportxt"
              var a = document.getElementById("exportxt");

              //Set code to run when the link is clicked
              // by assigning a function to "onclick"
              a.onclick = function() {

                // Your code here...


    function downloadInnerHtml(filename, elId, mimeType) {
        var elHtml = document.getElementById(elId).innerHTML;
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
        link.click(); 
    }
    var fileName =  'myexportedhtml.txt'; // You can use the .txt extension if you want
    downloadInnerHtml(fileName, 'editor','text/plain');
                //If you don't want the link to actually 
                // redirect the browser to another page, then
                // return false at the end of this block.
                // Note that this also prevents event bubbling,
                // which is probably what we want here, but won't 
                // always be the case.
                return false;
              }
            }

    </script>


    <a id="exportxt" href="#">SAVE PROJECT IN TXT FILE</a> 

<div id="editor"><p style="font-family:'Courier New', Courier, monospace; font-size:11px; color:#663300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus facilisis ante id luctus. Aliquam vestibulum, dui in pulvinar facilisis, felis nisl viverra nisl, nec ultrices neque tortor eget erat. Vivamus vel leo vehicula, condimentum quam aliquam, congue mauris. Pellentesque id lectus id nulla molestie vehicula sed at velit. Maecenas sit amet tristique nunc, in lobortis mi. Integer in turpis odio. Duis eget urna vestibulum, venenatis justo et, semper neque. Suspendisse in ante massa. Aenean massa nisl, tincidunt id nisl eu, convallis lobortis augue. Integer blandit augue eget nunc condimentum consectetur. Duis gravida nisl hendrerit, sagittis orci in, sollicitudin risus. Nullam elementum sem nec nunc facilisis, et semper metus tincidunt.

Phasellus ornare quis ipsum non scelerisque. In sollicitudin est placerat nibh porttitor pretium. Phasellus ac purus nulla. Phasellus in enim vel leo viverra sodales eget sit amet ante. Sed ultrices elementum nibh, tristique euismod nunc volutpat sit amet. Suspendisse potenti. Morbi feugiat diam tristique, euismod dui in, mattis diam. Vestibulum euismod commodo cursus. Proin posuere libero vitae purus blandit, in posuere erat malesuada. Donec ultrices vel velit in feugiat. Vestibulum suscipit erat urna, bibendum vestibulum dui varius sit amet.</p></div>

クレジット、この答え： リンクを使用してJavaScriptを呼び出す方法

0
023023