web-dev-qa-db-ja.com

クライアント側でchromeでjavascriptを使用してファイルを作成します

テキストファイルを作成し、javascriptを使用してユーザーのコンピューターの[ダウンロード]セクションにファイルを保存できるかどうかを知りたいのですが。私の機能が動作する方法は、ユーザーが送信ボタンをクリックすると、テキストファイルにユーザー情報を入力し、それを自分のマシンに保存します。これをGoogle Chromeで動作させたいです。

これは可能ですか？これは深刻なセキュリティ問題であることを具体的に伝える投稿を見てきました。

javascriptgoogle-chromejavascript-eventsgoogle-chrome-extensionfacebook-javascript-sdk
28
Praveen

もちろん、新しいAPIを使用してできます： http://jsfiddle.net/4D92b/88/ 。

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

 window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.bin', {create: true}, function(fileEntry) { // test.bin is filename
        fileEntry.createWriter(function(fileWriter) {
            var arr = new Uint8Array(3); // data length

            arr[0] = 97; // byte data; these are codes for 'abc'
            arr[1] = 98;
            arr[2] = 99;

            var blob = new Blob([arr]);

            fileWriter.addEventListener("writeend", function() {
                // navigate to file, will download
                location.href = fileEntry.toURL();
            }, false);

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});
39
pimvdb

これをChromeブラウザに入力します

_data:text;charset=utf-8,helloWorld
_

したがって、ユーザー向けのダウンロードを作成するには、次のようにします。

data='<a href='data:text;charset=utf-8,'+uriEncode(yourUSERdataToDownload)+' >Your Download</a>

次に、ユーザーが押すためにdomに注入します。

11
Arcabard

これを試して：

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"'>Your Download</a>";
document.getElementById('test').click();

ファイル名を設定する場合は、アンカータグのdownload属性を使用します。

document.body.innerHTML+="<a id='test' href='data:text;charset=utf-8,"+encodeURIComponent("hi")+"' download=yourfilename>Your Download</a>";
document.getElementById('test').click();
4
dsrdakota

次のメソッドは、IE11 +、Firefox 25+およびChrome 30+で動作します：

<a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

アクションでこれを参照してください： http://jsfiddle.net/Kg7eA/

FirefoxおよびChromeは、ナビゲーション用のデータURIをサポートします。これにより、データURIにナビゲートしてファイルを作成できます。一方、IE 。

一方、IEには、ブロブを保存するためのAPIがあり、これを使用してファイルを作成およびダウンロードできます。

4
dinesh ygv

いいえ、クライアントのコンピューターで悪意のあるプログラムを作成し、プライバシーを損なう可能性があるためです。

また、ファイルをダウンロードする要求はサーバーから送信されるため、サーバー上でファイルを作成し、ユーザーに提供する必要があります。ユーザーがそれを保存することを望みます（要求した場合は、そうする可能性があります） 。

別の考えられる解決策は、データURIまたはCSVを使用することですが、それらのブラウザーサポートは不完全（IE）です。 サーバー経由ではなく、ユーザーがダウンロードするためにメモリにファイルを作成する

0
Madara Uchiha

ユーザーにテキストファイルを提供するには、サーバー側の機能が必要です（javascriptでは不十分です）。ファイルを作成するサーバー側スクリプトを作成し、javascriptを使用してユーザーに保存を促すことができます。

0
nonouco

ユーザーからの[送信]ボタンで、サーバー上にファイルを作成し、ユーザーをファイルのURLにリダイレクトして、そこから自動的にダウンロードする必要があります。

0
vicky