Vue で JSON データを Excel スプレッドシートにエクスポートする方法

この記事では、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 を使用して統合 Iframe ページを実装する方法

vue の mixin の詳細な解釈

以上がVue で JSON データを Excel スプレッドシートにエクスポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。