Javascriptは保存フォルダーを実装します

近年、クラウド ストレージの普及により、フォルダー管理は多くの人に無視されています。ただし、オフライン ファイルを頻繁に使用する必要がある一部のユーザーにとって、ローカル ストレージ フォルダーの必要性は依然として不可欠です。この記事ではJavaScriptを使用してフォルダ保存機能を実装する方法を紹介します。

1. 単一ファイルの保存

JavaScriptではファイルの保存方法は比較的簡単で、html5のaタグとdownload属性を利用することができます。コード例:

var blob = new Blob([content]);  // content为需要保存的文本内容

var fileName = 'example.txt';

var a = document.createElement('a');

a.download = fileName;

a.href = URL.createObjectURL(blob);

a.click();

上に示すように、まず Blob オブジェクトとファイルのファイル名を作成し、次にタグを作成し、download 属性をファイル名に設定し、href 属性を URL アドレスに設定します。 Blobオブジェクトとトリガーはaタグのclickイベントで十分です。

2. フォルダーを保存します

しかし、複数のファイルを保存する必要がある場合、上記の方法を使用するだけではニーズを満たすことができなくなります。複数のファイルを 1 つのフォルダーにパッケージ化することを検討する必要があります。この状況では、JSZip ライブラリを使用できます。

JSZip は、ブラウザ側で zip 圧縮ファイルの作成、読み取り、解凍ができるオープンソースの JavaScript ライブラリです。以下は、フォルダーを保存するコード例です:

var zip = new JSZip();

zip.file("example1.txt", "content1");  // 将需要保存的文本内容添加到zip实例中
zip.file("example2.png", "content2");

zip.generateAsync({type:"blob"})  // 将zip打包成blob对象
.then(function(content) {
    saveAs(content, "example.zip");  // 调用FileSaver库将blob保存到本地
});

上に示すように、最初に JSZip ライブラリをインスタンス化し、次に、保存する必要があるファイルを zip.file( ) メソッド ;最後に、zip.generateAsync() メソッドを使用して、zip インスタンスから BLOB オブジェクトを生成します。このメソッドは Promise オブジェクトを返すため、then メソッドを介してチェーンする必要があることに注意してください。最後に、FileSaver ライブラリを使用して BLOB オブジェクトをローカルに保存し、フォルダーを保存できます。

3. 互換性の問題

上記の方法の互換性はブラウザごとに異なるため、適応させる必要があることに注意してください。

FileSaver ライブラリの場合、Apple Safari などのすべてのブラウザでは互換性がなく、WebKit カーネルを使用する必要があり、ファイル名を ASCII エンコードに変換する必要があります。サンプル コードは次のとおりです。

function onExportClick(){
    var text     = fileText
    var filename = 'test.txt'.replace(/[^a-zd_]/gi,'_').toLowerCase();
    var blob = new Blob([text], {type: 'text/plain'});
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveBlob(blob, filename);
    }else{
        var a = document.createElement('a');
        var url = URL.createObjectURL(blob);

        if(a.download != undefined){
            a.href     = url;
            a.download = filename;
            a.click();
        }else{
            window.location.href = url;
        }

        URL.revokeObjectURL(url);
    }
}

JSZip ライブラリの場合、ファイル タイプとエンコードの問題を考慮する必要があります。ファイルの種類が異なると、異なるエンコーディングを使用する必要があります。また、一部のブラウザでは追加のファイルまたはフォルダが追加される場合があることに注意してください。

ブラウザの互換性には多くの問題があるため、これらのライブラリを使用するときは多くの状況、特にファイル名やファイルの種類などの問題を考慮する必要があります。

概要:
この記事では、JavaScript を使用してフォルダーを保存する機能を実現する方法を紹介します。実装プロセスでは、JSZip ライブラリと FileSaver ライブラリを使用する必要があります。ブラウザの互換性の問題のため、異なるブラウザ間の適応には注意が必要です。

以上がJavascriptは保存フォルダーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。