VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル化します

以下に示すように、ストアのモジュールの common.js にパブリック メソッドをカプセル化します。

ここに画像の説明を挿入

コードは次のとおりです。

定数ダウンロード = {
    アクション: {
        downloadData({ コミット, 状態 }, データ) {
            新しい Promise を返します ((resolve, reject) => {
                data.event(data.formData).then(res => {
                    const blob = 新しいBlob([res.data], {
                        タイプ: 'application/vnd.ms-excel'
                    })
                    const objectUrl = URL.createObjectURL(blob)
                    const link = document.createElement('a') // タグを作成する link.href = objectUrl
                    // ファイルの名前を変更する link.download = res.headers['content-disposition'].split(
                        '='
                    )[1]
                    リンク.クリック()
                    URL.revokeObjectURL(オブジェクトURL)
                    解決する
                }).catch((エラー) => {
                    拒否(エラー)
                })
            })
        }

    }

}

エクスポート デフォルト ダウンロード

次に、ストアのインデックスのパブリックモジュールにエクスポートします

ここに画像の説明を挿入

ここに画像の説明を挿入

メソッドを呼び出す必要があるコンポーネントで使用する

メソッド: {
       //データのエクスポートメソッド handleExport(formData) {
            this.loading = true
            定数データ = {
            // '@/api/loan/userLoanList' から { loanDownloadData } をインポートします
            // イベント: loanDownloadData、loanDownloadData はデータをエクスポートするためのインターフェースのキーワードです //formData は loanDownloadData インターフェース イベントに必要なパラメーターです: '', 
                フォームデータ: フォームデータ
            }
            this.$store.dispatch('downloadData', data).then(res => {
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },

}

PS: インターフェースが正常にデータを返すことができるのに、インターフェースの呼び出し時にエラーが発生する場合は、インターフェース インターセプション ファイルによって返されるデータが正しくない可能性があります。まず、次のように utils->request.js ファイル (通常はこの場所にあります) を見つけます。

ここに画像の説明を挿入

インターフェースがインターセプトされたとき、エクスポートインターフェースがレスポンスなどのすべてのデータを返す必要がある場合、ヘッダーの名前変更ファイルはcommon.jsファイルで使用する必要があるため、次のようにします。

ここに画像の説明を挿入

一般的に、インターフェースインターセプションは、const res = response.data、return resのようにデータを返すだけでよい。

ここに画像の説明を挿入

Excel データをエクスポートするためのパブリック関数の Vue カプセル化に関するこの記事はこれで終わりです。Vue エクスポート Excel パブリック関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue フロントエンドでバックエンドから返された Excel ファイルをエクスポートする方法
  • VueはバックエンドインターフェースにExcelテーブルをエクスポートするよう要求します
  • js-xlsx を使用して Vue で Excel をエクスポートする方法
  • Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画
  • Vue ベースの Excel 解析とエクスポートの詳細な説明
  • Vue を使用して Excel をエクスポートする際の落とし穴と解決策

<<:  MySQL 8.0.22 のインストールと設定のグラフィックチュートリアル

>>:  MySQL で binlog を使用する際のフォーマットの選択方法

推薦する

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...

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

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

VueはElement el-uploadコンポーネントを使用してピットに足を踏み入れます

目次1. 基本的な使い方2. 画像量の制御3. 画像形式の制限/複数の画像を選択可能補足: vueプ...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Ubuntu Linux に Git と GitHub をインストールして使用する

Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...

Vue vee-validateプラグインの簡単な使い方

目次1. インストール2. インポート3. 検証ルールを定義します(エクスポート用に js ファイル...

WeChatアプレットは画像コントロールを選択します

この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...

MySQL 8.0.13 手動インストールチュートリアル

この記事では、MySQL 8.0.13の手動インストールチュートリアルを参考までに紹介します。具体的...

mysql5.7 リモート アクセス設定

mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...

Linux でのスケジュールされたタスクと遅延タスクの詳細な説明

で+ 時間 17:23に at> touch /mnt/file{1..9} ##アクションを...

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

MySQL統計テーブルのサイズを説明する例

各データベース内の各テーブルのサイズをカウントすることは、データ ガバナンスの最も単純な要件の 1 ...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...