TaikiTkwkbysh
@TaikiTkwkbysh (WAKA Engineer)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

【Javascript】File API:Writeという機能はもうないのでしょうか。

解決したいこと

Javascriptを利用したファイルの書き込みについて調べているのですが、
File API:Writerについて調べても全く出てこず、出てくるのはFile System Access APIの情報です。

下記のサイトの情報をもとに調べているのですが、

ファイルへの書き込みを行うAPIである、File API:Write についての詳しい情報が出てこず、
さらにサイトで記載されている、FIle API:Writeが提供しているAPIの

・BlobBuilder バイナリ・オブジェクトの構築を実施
・FileSaver Blobファイルに名前を付けて保存する機能などを提供
・FileWriter 非同期処理によるファイルへの書き込み/保存を実施
・FileWriterSync 同期処理によるファイルへの書き込み/保存を実施

の情報も出てきません。

File API:Writeはすでに廃止されており、利用できるFIle APIは読み込みだけなのでしょうか。

またもし廃止されているのであれば、現在Javascriptによるファイルの書き込み処理は何を利用してされているのでしょうか。

解説されているサイト等のご報告でも結構ですので、ご教示いただけますと幸いです。

何卒よろしくお願いいたします。

0

2Answer

File API: Writer 仕様は未完成のまま策定作業が取りやめになったため、利用できません。

Work on this document has been discontinued and it should not be referenced or used as a basis for implementation.

ブラウザでファイルに書き込むには以下のコード例が使えますが、実験的な機能であり動くのは Chrome など一部のブラウザだけです。

ファイル書き込みを行う安定した方法は現時点では存在しません。 Node.js や Deno など、ブラウザ以外の JS 処理系には独自のファイル書き込み API があります。

4Like

Comments

  1. @TaikiTkwkbysh

    Questioner

    @uasi
    この度はご教示頂き、ありがとうございます。
    そのような背景があったとは存じ上げませんでした。
     

    ファイル書き込みを行う安定した方法は現時点では存在しません。

    ファイルシステムAPIでも実験的な機能なのですね...。

    ご教示頂き、大変助かります。
    また機会がございましたら、ご教示のほど宜しくお願いいたします。

現在Javascriptによるファイルの書き込み処理は何を利用してされているのでしょうか。

blob が取得できるのであれば、javascript でファイルをダウンロードするときのように、a タグを生成してその href 属性に URL Api の createObjectURL で取得した blob を設定し、スクリプトでその a タグをクリックするようにしてはいかがですか?

以下のコード例を見てください。fetch Api で blob を取得していますが、この応用で「Javascriptを利用したファイルの書き込み」という目的は果たせませんか?

const fetchApi = async () => {
    const url = "/Download/VirtualFileResult";
    const filename = "testfetch";
 
    const response = await fetch(url);
    if (response.ok) {
        const blob = await response.blob();
        const a = document.createElement("a");
        const url = window.URL;
        a.href = url.createObjectURL(new Blob([blob],
            { type: blob.type }));
        document.body.appendChild(a);
        a.style = "display: none";
        a.download = filename + ".pdf";
        a.click();
    } else {
        // エラー処理(省略)
    }
};
1Like

Comments

  1. @TaikiTkwkbysh

    Questioner

    @SurferOnWww
    この度はご教示頂き、誠にありがとうございます。
    このような方法があったのですね。

    こちらの方法で一度試してみます。
    大変助かりました。
     
    また機会がございましたら、ご教示のほど宜しくお願いいたします。

Your answer might help someone💌