例示する最近、ファイルをダウンロードする必要があるという状況に遭遇しましたが、認証が必要です。つまり、バックグラウンドから返されたダウンロード リンクを使用してダウンロードすることはできません。リンクを取得すると、許可なしに直接ダウンロードできるためです。したがって、考え方を変える必要があります。Baidu で検索すると、blob オブジェクトについて知ることができます。これがこの記事の目的です。 注意:この記事は学習トラックの記録のみを目的としています。著作権侵害がある場合は、削除するためにご連絡ください。 1. ブロブオブジェクトBlob オブジェクトは、不変の生のファイルのようなオブジェクトを表します。データはテキストまたはバイナリ形式で読み取ることができ、データ操作のために ReadableStream に変換することもできます。 2. フロントエンドBlob ダウンロードのアイデア:
コード: // ダウンロードエクスポート関数 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. バックエンド
// 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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CSS 境界線の半分または部分的に表示される実装コード
目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...
位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...
ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...
一般的に、URL に基づいてファイルをダウンロードする場合、次の 2 つの解決策があります。 1. ...
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
コードが失われ、コンテナ内で実行されているイメージから必要なコードを回復する必要がある場合があります...
翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...
1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...
Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...
由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...
k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...
フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...
マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...
ここでは、dockerがインストールされたcentosサーバーを紹介し、リモートリンクサービスを開始...
MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...