vue3 + ts importer un fichier Excel lire l'acquisition de fichiers Excel

Installez d'abord les dépendances xlsx

npm install--save xlsx

J'utilise le composant de téléchargement de view-ui-plus et element plus. Il y a une différence. J'en parlerai ci-dessous.

	<Upload
	  class="upload-btn"
	  ref="upload"
	  :show-upload-list="false"
	  :format="['xlsx', 'xls']"
	  :max-size="2048"
	  :before-upload="handleBeforeUpload"
	  action="#"
	>
	  <Button class="m-left-10">批量导入询价</Button>
	</Upload>

Introduit dans la page utilisée

import XLSX from "xlsx";

Créez un nouveau tools.ts et créez readFile

/**
 * 读取excel
 * @param excel
 * @param readExcel
 * @returns
 */
export const readFile = (file: any) => {
    
    
  return new Promise(resolve => {
    
    
      let reader = new FileReader()
      reader.readAsBinaryString(file)
      reader.onload = (ev: any) => {
    
    
          resolve(ev.target.result)
      }
  })
}

Introduisez des outils dans la page que vous utilisez

import {
    
     readFile } from "@/utils/tools";

Faites attention aux commentaires lorsque vous appelez l'
élément readFile plus le composant.

   /**
   * 文件上传
   * element plus是on-change方法 同样是使用file参数 
   * 但是let dataBinary = await readFile(file) 要改成 readFile(file.row)
   */
  private async handleBeforeUpload(file: any) {
    
    
    let dataBinary = await readFile(file);
    let workBook = XLSX.read(dataBinary, {
    
     type: "binary", cellDates: true });
    let workSheet = workBook.Sheets[workBook.SheetNames[0]];
    const data = XLSX.utils.sheet_to_json(workSheet);
    console.log(data, "data");
  }

À ce stade, certaines personnes signaleront TypeError : Impossible de lire les propriétés non définies (lecture de "lecture")

Désinstaller XLSX

npm uninstall xlsx

Installez la version adaptée. Ma version ici est la 0.16.0

npm install xlsx@0.16.0