ファイルのダウンロードを実現する javascript Blob オブジェクト

ファイルのダウンロードを実現する javascript Blob オブジェクト

例示する

最近、ファイルをダウンロードする必要があるという状況に遭遇しましたが、認証が必要です。つまり、バックグラウンドから返されたダウンロード リンクを使用してダウンロードすることはできません。リンクを取得すると、許可なしに直接ダウンロードできるためです。したがって、考え方を変える必要があります。Baidu で検索すると、blob オブジェクトについて知ることができます。これがこの記事の目的です。

注意:この記事は学習トラックの記録のみを目的としています。著作権侵害がある場合は、削除するためにご連絡ください。

1. ブロブオブジェクト

Blob オブジェクトは、不変の生のファイルのようなオブジェクトを表します。データはテキストまたはバイナリ形式で読み取ることができ、データ操作のために ReadableStream に変換することもできます。

2. フロントエンド

Blob ダウンロードのアイデア:

1) ajax を使用してリクエストを開始し、受信タイプを blob として指定します (responseType: 'blob')
2) リクエストによって返されたヘッダー情報内のコンテンツ配置を読み取ります。返されたファイル名はその中にあります (ファイル名をカスタマイズする場合は、この手順をスキップできます)
3) URL.createObjectURLを使用して、要求されたBLOBデータをダウンロード可能なURLアドレスに変換します。
4) aタグを使ってダウンロードする

コード:

// ダウンロードエクスポート関数 download(query,newFileName) {
  リクエストを返す({
    URL: '/file/download',
    メソッド: 'get'、
    レスポンスタイプ: 'blob',
    パラメータ: クエリ
  }).then((res) => {
    /**
     * BLOB ダウンロードのアイデア * 1) Ajax を使用してリクエストを開始し、受信タイプを BLOB として指定します (responseType: 'blob')
     * 2) リクエストによって返されたヘッダー情報内の content-disposition を読み取ります。返されたファイル名はその中に含まれています (または、ファイル名をカスタマイズしてこの手順をスキップすることもできます)
     * 3) URL.createObjectURLを使用して、要求されたBLOBデータをダウンロード可能なURLアドレスに変換します* 4) aタグを使用してダウンロードします* 
     */
    blob = res.data とします
    // レスポンス ヘッダーからファイル名を取得し、バックエンドでファイル名を設定します。 response.setHeader("Content-disposition", "attachment; filename=xxxx.docx");
    // patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*') とします
    // contentDisposition = decodeURI(res.headers['content-disposition']) とします
    // result = patt.exec(contentDisposition) とする
    // ファイル名 = result[1]とする

    // 要求された BLOB データをダウンロード可能な URL アドレスに変換します。let url = URL.createObjectURL(blob)
    // ダウンロードタグを作成する <a>
    定数 aLink = document.createElement('a')
    aLink.href = URL
    // 2. カスタムファイル名を直接使用してダウンロードファイル名を設定します。aLink.setAttribute('download', newFileName )
    document.body.appendChild(リンク)
    //ダウンロードのクリックをシミュレートする aLink.click()
    // ダウンロード タグを削除します。 document.body.removeChild(aLink);
  })
}

このメソッドを呼び出す

//ダウンロード download(row) {
      // filePath: ファイルパス、例: e:\upload\
	  // fileName: ファイル名、例: a.xlsx
      フォーム = {
        ファイルパス: row.filePath、
        ファイル名: 行.ファイル名、
      };
      //ダウンロード、row.fileOriginalName はファイルの元の名前で、ダウンロード時にファイルに名前を付けるためにのみ使用されます。download(form, row.fileOriginalName);
    }
// Alibaba の OSS サービスを使用しているため、ファイル パスをバックエンドに渡し、ファイル パスに従って OSS インターフェイスをクエリして返されたファイル ストリーム (たとえば、BufferedInputStream) を取得し、応答ヘッダーに戻り値の型を設定するだけです。

3. バックエンド

バックエンドはここで Alibaba の OSS サービスを使用してファイル ストリームを直接取得します (new BufferedInputStream(ossObject.getObjectContent()))。OSS でない場合は、対応するサーバー上のファイル (File) を読み取り、BufferedInputStream に変換してから、次のコードを直接適用するだけです (つまり、response.getOutputStream() を通じて BufferedOutputStream を設定します)。

	// response: レスポンス // filePath: ファイルパス、例: e:\upload\
	// fileName: ファイル名、例: a.xlsx
   パブリック void ダウンロード (HttpServletResponse レスポンス、文字列 filePath、文字列 fileName) {
        //ダウンロードするファイル名 response.reset();
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
        レスポンス.setContentType("application/octet-stream");
        レスポンス.setCharacterEncoding("utf-8");
        // OSSClient インスタンスを作成します。
        OSS ossClient = 新しい OSSClientBuilder().build(エンドポイント、アクセスキー ID、アクセスキー シークレット);
        // ossObject には、ファイルが配置されているストレージ スペースの名前、ファイル名、ファイルのメタ情報、および入力ストリームが含まれます。
        OSSObject ossObject = ossClient.getObject(bucketName, filePath + "/" + fileName);

        BufferedInputStream の入力 = null;
        BufferedOutputStream 出力 = null;

        byte[] buff = 新しいbyte[1024];
        整数長さ = 0;
        試す {
            in = 新しい BufferedInputStream(ossObject.getObjectContent());
            出力ストリームを新しい BufferedOutputStream に格納します。
            while ((長さ = in.read(buff)) != -1){
                out.write(バッファ、0、長さ);
            }
        } キャッチ (IOException e) {
            e.printStackTrace();
        ついに
            if(out != null){
                試す {
                    出力をフラッシュします。
                    out.close();
                } キャッチ (IOException e) {
                    e.printStackTrace();
                }
            }
            if(in != null){
                試す {
                    in.close();
                } キャッチ (IOException e) {
                    e.printStackTrace();
                }
            }
            ossClient が null の場合
                ossClient.shutdown();
            }
        }
    }

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ファイルのマルチパートアップロード
  • javascriptはフォームファイルのフルパスを取得します
  • JavaScript Blobオブジェクトの原理と使用法の詳細な説明
  • js での Blob オブジェクトの紹介と使用
  • js blob 型 URL のビデオダウンロード問題の解決
  • Javascript ファイルと Blob の詳細な説明

<<:  HTML 編集の基礎 (初心者必読)

>>:  CSS 境界線の半分または部分的に表示される実装コード

推薦する

MySQL の高度な機能 - データ テーブル パーティショニングの概念とメカニズムの詳細な説明

目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...

CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

Vue は URL に基づいて非同一オリジンのファイルをどのようにダウンロードするのか

一般的に、URL に基づいてファイルをダウンロードする場合、次の 2 つの解決策があります。 1. ...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

Dockerコンテナイメージからコードを復元する手順

コードが失われ、コンテナ内で実行されているイメージから必要なコードを回復する必要がある場合があります...

Python スクリプトを Ubuntu で直接実行する方法

翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...

Docker を使用してコンテナ内のルート パスワードを変更する方法

1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...

クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明

k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...

ページ下部のフッターを修正する方法(複数の方法)

フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...

クラウド CentOS で Docker リモート サービス リンクを有効にするための実装手順

ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...