フロントエンド Vue は Excel をインポートし、コンテンツを読み取ります。

Excel コンテンツを読み取るためのフロントエンド Vue インポート

1.xlsxパッケージをインストールする

npm i xlsx

2. main.js ファイルに xlsx を導入します

import XLSX from xlsx

3. コンポーネント内で機能を実現する

1.アップロードされたファイルのel-uploadコンポーネントのon-changeイベントに関数をバインドします。ここで、私の関数はhandleと呼ばれます

2. handle 関数では、ファイルが読み取られ、読み取られたデータはfilechange関数を通じて読み取られます。 、親コンポーネントに返されます

    readFile(file) {
    
    
      //文件读取
      return new Promise((resolve) => {
    
    
        let reader = new FileReader();
        reader.readAsBinaryString(file); //以二进制的方式读取
        reader.onload = (ev) => {
    
    
          resolve(ev.target.result);
        };
      });
    },

    async handle(ev) {
    
    
      let file = ev.raw;
      if (this.lastUid == file.uid) {
    
    
        return;
      }
      this.lastUid = file.uid;
      if (file) {
    
    
        if (
          file.name.indexOf(".xls") != -1 ||
          file.name.indexOf(".xlsx") != -1
        ) {
    
    
        //这里进行了判断，只能读取这两种类型的文件。
          let data = await this.readFile(file);
          let workbook = XLSX.read(data, {
    
     type: "binary", cellDates: true }); //解析二进制格式数据
          let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
          let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
          this.$emit("filechange", result);//将数据通过filechange函数，传递给父组件
        }
      }
    },

3. 効果を実感する
インポートされたフォームは次のとおりです。

取得されたデータ形式は次のとおりです。