ホームページ > ウェブフロントエンド > jsチュートリアル > Vue で JSON データを Excel スプレッドシートにエクスポートする方法

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

亚连
リリース: 2018-06-22 17:26:40
オリジナル
3640 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート