この記事では、Vue が JSON データを Excel スプレッドシートにエクスポートする例を主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう
私はオンラインで多くのドキュメントを読みましたが、完全ではないと感じたので、完全で詳細なチュートリアルをここに書きます。
1. 依存関係をインストールします (基本的には前と同じです)
npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev
2. 2 つの必要な js ファイル Blob.js と Export2Excel.js をダウンロードします。
ここにダウンロード アドレスを投稿します:
Export2Exce_jb51.rar
3. src ディレクトリに新しいベンダー フォルダーを作成し、その中に Blob.js と Export2Excel.js を置きます。
4. webpack.base.conf.js 設定を変更します
resolve のエイリアス:
'vendor': path.resolve(__dirname, '../src/vendor')
Fif. .vue ファイル
script セクション内
data(){ return{ list:[ { name:'韩版设计时尚风衣大', number:'MPM00112', salePrice:'¥999.00', stocknums:3423, salesnums:3423, sharenums:3423, }, { name:'韩版设计时尚风衣大', number:'MPM00112', salePrice:'¥999.00', stocknums:3423, salesnums:3423, sharenums:3423, }, ] } methods:{ formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, export2Excel() { require.ensure([], () => { const { export_json_to_excel } = require('../../../vendor/Export2Excel'); const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',]; const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ]; const list = this.goodsItems; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '商品管理列表'); }) } }
template:
<button @click="export2Excel">导出</button>
説明は次のとおりです:
1 . モジュールが見つからない「../../Export2Excel.js」などの報告があった場合、export2Excel()で必要なパスを個別に調整する必要がある場合がありますので、ご自身で修正してください。
2. tHeader は各列の名前であり、手動で入力する必要があります。
3. filterVal はデータ内のリストのキー値であり、自分で記述する必要があります。
4. ここでデータ内のリスト名と一致することを忘れないでください
5. ここで、エクスポートされた Excel ファイルの名前を定義できます
上記は、私が皆さんのためにコンパイルしたものです。将来的には誰にとっても役立つことを願っています。
関連記事:
Vue のデバッグ ツール vue-devtools について (詳細なチュートリアル)
以上がVue で JSON データを Excel スプレッドシートにエクスポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。