Vue.jsアプリケーション内で、サーバーAPIを介さずにデータをExcelファイルとしてエクスポートする方法を紹介します。

必要なパッケージのインストール

npm install file-saver xlsx
npm install script-loader --save-dev

補助スクリプトの配置

Blob.js と Export2Excel.js をプロジェクト内に配置します。これらのファイルは外部リソースから入手可能です。

ディレクトリ構成と設定

プロジェクトの src/ 配下に utils/ ディレクトリを作成し、上記2ファイルを格納します。次に、webpack.base.conf.js の resolve.alias に以下を追加:

'utils': path.resolve(__dirname, '../src/utils')

コンポーネントでの実装例

<template>
  <div class="data-container">
    <h3>商品一覧</h3>
    <button @click="downloadAsExcel">Excelでダウンロード</button>
    <table border="1" cellspacing="0" style="border-collapse:collapse;">
      <thead>
        <tr>
          <th>ID</th>
          <th>商品名</th>
          <th>契約番号</th>
          <th>契約名</th>
          <th>バージョン</th>
          <th>権利者</th>
          <th>有効期限</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(record, idx) in productList" :key="idx">
          <td>{{ record.id }}</td>
          <td>{{ record.title }}</td>
          <td>{{ record.contractId }}</td>
          <td>{{ record.contractTitle }}</td>
          <td>{{ record.ver }}</td>
          <td>{{ record.owner }}</td>
          <td>{{ record.expiryDate }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

スクリプト部分

export default {
  data() {
    return {
      productList: [
        {
          id: '0001',
          title: '製品A',
          contractId: 'CT001',
          contractTitle: '契約書A',
          ver: '2.1.0',
          owner: '山田太郎',
          expiryDate: '2025-06-30'
        },
        {
          id: '0002',
          title: '製品B',
          contractId: 'CT002',
          contractTitle: '契約書B',
          ver: '1.8.3',
          owner: '鈴木花子',
          expiryDate: '2025-12-15'
        }
      ]
    };
  },
  methods: {
    transformData(keys, source) {
      return source.map(item => keys.map(key => item[key]));
    },
    downloadAsExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/utils/Export2Excel');
        const headers = ['ID', '商品名', '契約番号', '契約名', 'バージョン', '権利者', '有効期限'];
        const fieldKeys = ['id', 'title', 'contractId', 'contractTitle', 'ver', 'owner', 'expiryDate'];
        const rawData = this.productList;
        const formattedData = this.transformData(fieldKeys, rawData);
        export_json_to_excel(headers, formattedData, '商品情報一覧');
      });
    }
  }
};

注意点:

• requireパスはプロジェクト構造に応じて調整してください。
• headers はExcelのヘッダー行、fieldKeys はデータオブジェクトのプロパティキーに対応します。
• 最終引数 '商品情報一覧' は出力されるExcelファイル名です。