Vue ベースの Excel 解析とエクスポートの詳細な説明

   <!-- ファイルのアップロード ボタン -->
   <div class="buttonBox">
     <el-アップロード
       アクション
       受け入れる = ".xlsx、.xls"
       :自動アップロード="false"
       :ファイルリストを表示="false"
       :on-change="ハンドル"
     >
       <el-button type="primary" slot="trigger">EXCEL ファイルを選択</el-button>
     </el-アップロード>

     <el-button type="success" @click="submit" :disabled="disable">データを収集して送信</el-button>
   </div>

   <!-- 解析されたデータ-->
   <div class="tableBox" v-show="表示">
     <h3>
       <i class="el-icon-info"></i>
       収集されたデータは次のとおりです。正しいことを確認した後、「収集したデータを送信」ボタンをクリックしてサーバーにアップロードしてください。
     </h3>

     <el-table :data="tempData" style="width: 100%" :height="height" border>
       <el-table-column prop="name" label="名前" min-width="50%"></el-table-column>
       <el-table-column prop="phone" label="電話" min-width="50%"></el-table-column>
     </el-table>
   </div>

// バイナリ形式でファイルを読み込む export function readFile(file) {
    新しいPromiseを返します(resolve => {
        リーダーを新しいFileReader()にします。
        reader.readAsBinaryString(ファイル);
        リーダー.onload = ev => {
             ev.target.result を解決します。
        };
    });
 }

  //FILE内のデータを読み取り（JSON形式に変換）
  データ = readFile(ファイル) を待機します。
  workbook = xlsx.read(data, { type: "binary" }) とします。
    ワークシート = workbook.Sheets[workbook.SheetNames[0]];
  データ = xlsx.utils.sheet_to_json(ワークシート);
  // 結果を印刷し、次の図を追加します console.log(workbook);

// フィールド対応表エクスポートlet character = {
        名前： {
            テキスト: "名前",
            タイプ: '文字列'
        },
        電話：
            テキスト: "電話",
            タイプ: '文字列'
        }
    };

   arr = [] とします。
    データ.forEach(アイテム => {
        obj = {} とします。
        for (let key in 文字) {
          if (!character.hasOwnProperty(key)) break;
          v = 文字[キー]とします。
            テキスト = v.text、
            タイプ = v.type;
          v = 項目[テキスト] || "";
          型 === "文字列" ? (v = String(v)): null;
          型 === "number" ? (v = Number(v)): null;
          obj[キー] = v;
        }
      arr.push(obj);
    });

    //サーバーにデータを送信する async submit() {
      （this.tempData.length <= 0）の場合{
        this.$メッセージ({
          メッセージ: 「まず EXCEL ファイルを選択してください!」
          タイプ:「警告」、
          表示閉じる: true
        });
        戻る;
      }

      これを無効にします。
      loadingInstance = Loading.service({
        テキスト: 「親愛なるあなた、少々お待ちください。私は懸命に対処中です!」
        背景: "rgba(0,0,0,.5)"
      });

      // 完了後に行う処理 let complate = () => {
        this.$メッセージ({
          メッセージ: 「親愛なるあなたへ、データをアップロードしました!」
          タイプ: "成功",
          表示閉じる: true
        });
        this.show = false;
        これを無効にします。
        ロードインスタンスを閉じます。
      };

      // データを 1 つずつサーバーに渡す必要があります。let n = 0;
      送信を非同期（） => {
        (n > this.tempData.length - 1) の場合 {
          // すべて complate() に合格しました。
          戻る;
        }
        本文を this.tempData[n] とします。
        // インターフェイスを実行します。let result = await createAPI(body);
        （parseInt（結果コード）=== 0）の場合{
          // 成功 n++;
        }
        送信（）;
      };
      送信（）;
    }

  <div class="コンテナ">
    <!-- アップロード ボタン -->
    <div class="buttonBox">
      <router-link to="/upload">
        <el-tooltip content="EXCEL データ収集" placement="top">
          <el-button type="primary" icon="el-icon-edit" 円></el-button>
        </el-tooltip>
      </ルーターリンク>
    </div>

    <!-- 検索エリア -->
    <div class="検索ボックス">
      <el-input v-model="search" placeholder="名前と携帯電話に基づくあいまい検索" @change="searchHandle"></el-input>
      <el-button type="success" @click="submit" :disabled="disabled">選択したデータをエクスポート</el-button>
    </div>

    <!-- リストエリア -->
    <div class="tableBox">
      <el-テーブル
        :data="テーブルデータ"
        :height="高さ"
        スタイル="幅: 100%"
        v-loading="読み込み中"
        element-loading-text="お嬢様、読み込みに一生懸命取り組んでいます..."
        @selection-change="選択変更"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="数値" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="名前" min-width="20%"></el-table-column>
        <el-table-column prop="phone" label="電話" min-width="20%"></el-table-column>
        <el-table-column prop="time" label="作成時間" min-width="25%" :formatter="フォーマッタ"></el-table-column>
      </el-table>
    </div>

    <!-- ページング領域 -->
    <div class="pageBox">
      <el-ページネーション
        背景
        単一ページで非表示
        layout="total, sizes, prev, pager, next"
        :page-size="ページサイズ"
        :current-page="ページ"
        :total="合計"
        @size-change="サイズ変更"
        @current-change="前へ次へ"
        @prev-click="前へ次へ"
        @next-click="前へ次へ"
      </el-pagination> ...
    </div>
  </div>

    // データをエクスポートする submit() {
      if (this.selectionList.length <= 0) {
        this.$メッセージ({
          メッセージ: 「まずエクスポートしたいデータを選択してください!」
          タイプ:「警告」、
          表示閉じる: true
        });
        戻る;
      }

      this.disabled = true;
      loadingInstance = Loading.service({
        テキスト: 「親愛なるあなた、少々お待ちください。私は懸命に対処中です...」
        背景: "rgba(0,0,0,.5)"
      });

      arr = this.selectionList.map(item => { とする
        戻る {
          ID: アイテム.id、
          名前: アイテム名、
          電話番号: item.phone
        };
      });
      // jsonデータをシートデータに変換する let sheet = xslx.utils.json_to_sheet(arr),
      // 新しいテーブルを作成します book = xslx.utils.book_new();
      //テーブルにシートを挿入する
      xslx.utils.book_append_sheet(ブック、シート、"sheet1");
      // xlsx の writeFile メソッドを使用してファイルを書き込みます xslx.writeFile(book, `user${new Date().getTime()}.xls`);

      ロードインスタンスを閉じます。
      this.disabled = false;
    }