Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法

Vue で Excel ストリーム ファイルをダウンロードし、ダウンロード ファイル名を設定する方法

概要

Excel 要件をエクスポートします。テンプレートのダウンロードまたはフィードバック結果のダウンロードをクリックすると、axios はバックエンド インターフェイス要求を開始し、返されたデータが応答を取得するときに、図に示すように文字化けした文字が表示されます。

以下にいくつかの治療方法を挙げます。

1. URL経由でダウンロード

つまり、バックエンドがファイルのアドレスを提供し、ブラウザを使用して直接ダウンロードすることができます。

window.location.href = ファイルパス経由でダウンロード

window.location.href = `${location.origin}/operation/ruleImport/template`

window.open(url, '_blank') 経由

window.open(`${location.origin}/operation/ruleImport/template`)

これら 2 つの使用方法の違いは次のとおりです。

  • window.location: 現在のページにジャンプします。つまり、現在のページを再配置します。この Web サイトの Web ページのみが Web サイト上で開くことができます。
  • window.open: リンクを新しいウィンドウで開きます。Web サイト上で別の Web サイトのアドレスを開くことができます。

2. aタグのダウンロード属性とblobコンストラクタを組み合わせてダウンロードする

a タグのダウンロード属性は、HTML5 標準に新しく追加されたものです。その機能は、ダウンロード URL に移動するのではなく、ブラウザのダウンロード操作をトリガーすることです。この属性を設定すると、ダウンロード時に新しいファイル名を使用できます。

フロントエンドはハイパーリンクを作成し、バックエンドからファイル ストリームを受信します。

axios.get(`/operation/ruleImport/template`, {
        responseType: "blob" // サーバー応答のデータ型。'arraybuffer'、'blob'、'document'、'json'、'text'、'stream' のいずれか。デフォルトは 'json' です。
    })
    .then(res => 
        if(!res) 戻り値
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // データを処理し、ファイルの種類を設定するための blob オブジェクトを構築します if (window.navigator.msSaveOrOpenBlob) { // IE10 と互換性があります
            navigator.msSaveBlob(blob、this.filename)
        } それ以外 {
            const href = URL.createObjectURL(blob) //指定されたblobオブジェクトを表す新しいURLを作成します。const a = document.createElement('a') //aタグを作成します。a.style.display = 'none'
            a.href = href //ダウンロードリンクを指定 a.download = this.filename //ダウンロードファイル名を指定 a.click() //ダウンロードをトリガー URL.revokeObjectURL(a.href) //URLオブジェクトを解放 }
        // ここでリンクを作成する必要はありません。window.open(href) を呼び出して直接ダウンロードすることもできます。
    .catch(エラー => {
        コンソール.log(エラー)
    })

注: バックエンド インターフェイスをリクエストする場合は、リクエスト ヘッダーに {responseType: 'blob'} を追加します。ダウンロードするファイル名を設定する場合は、拡張子を直接設定できます。設定されていない場合は、ブラウザーが自動的に正しいファイル拡張子を検出し、ファイルに追加します。

3. js-file-downloadプラグイン経由

インストール:

npm インストール js-file-download --S

使用

'js-file-download' からファイルをインポートします

axios.get(`/operation/ruleImport/template`, {
        responseType: 'blob' // 返されるデータ型})
    .then(res => {
        ファイルダウンロード(res.data, this.fileName)
    })

上記は、Excel ストリーム ファイルをダウンロードし、Vue でダウンロード ファイル名を設定する方法の詳細です。Excel ストリーム ファイルをダウンロードし、Vue でダウンロード ファイル名を設定する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Moment プラグインを使用して時間をフォーマットする vue のサンプルコード
  • vue3がフィルターを削除する理由
  • Vue が時間を動的かつリアルタイムで表示する仕組みの簡単な分析
  • Vue 開発における Moment の紹介と使用
  • VUEがターンテーブル大抽選会を実施
  • Vue カスタム命令を使用して Google アナリティクス イベント統計を報告する方法
  • Vue Element フロントエンドアプリケーション開発開発環境の準備
  • Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法
  • Vue の単一ページでビジネスデータを報告する方法

<<:  Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

>>:  Dockerコマンドの学習を1つの記事にまとめる

推薦する

Webフロントエンド開発コース Webフロントエンド開発ツールとは

インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...

MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...

vite2.0 設定学習の詳しい説明(typescript 版)

導入悠宇希の原文です。 vite は Vue CLI に似ています。vite も、基本的なプロジェク...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

サブセットかどうかを判断するためのMySQLメソッドの手順

目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

一般的なMySQLコマンドの概要

mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...

MySQLがサブクエリと結合の使用を推奨しない理由

ページ分割されたクエリを実行するには: 1. MySQL の場合、サブクエリと結合の使用は推奨されま...

Nginx ルーティング転送とリバースプロキシロケーション構成の実装

Nginx を設定する 3 つの方法最初の方法は、位置一致部分を直接置き換える。 2 番目の pro...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

html 内の絶対パス URL と相対パス URL、サブディレクトリ、親ディレクトリ、ルート ディレクトリ

絶対 URL は、インターネット上の特定のファイルに必要なすべてのコンテンツを表すために使用されます...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

MySQL 8.0.19 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...

CSS マルチレベルメニュー実装コード

これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...