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つの記事にまとめる

推薦する

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...

MySQL 8.0 以降の一般的なコマンドの詳細な説明

リモートアクセスを有効にする次のコマンドを実行して、root ユーザーのリモート アクセス権を有効に...

Ubuntu 18.04 が VMware 仮想マシンでネットワークに接続できない問題の解決策

仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

Mysql ルートユーザーアカウントのパスワードをリセットする問題を解決する

問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...

VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について

背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...

Angular構造ディレクティブモジュールとスタイルの詳細な説明

目次1. 構造指示モジュールforRoot()を書く3. スタイルの定義ドラッグ時の順序を調整するに...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)

1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...

画像ボタン送信とフォーム繰り返し送信の問題に関する議論

多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わ...

...

Linux で docker-compose を使用したソフトウェア構成の詳細な説明

序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...

MySQL の char、varchar、text フィールド タイプの違い

MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...