概要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 つの使用方法の違いは次のとおりです。
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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル
これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...
方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...
リモートアクセスを有効にする次のコマンドを実行して、root ユーザーのリモート アクセス権を有効に...
仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...
ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...
1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...
問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...
背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...
目次1. 構造指示モジュールforRoot()を書く3. スタイルの定義ドラッグ時の順序を調整するに...
目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...
1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...
多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わ...
序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...
MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...