vue3 + ts 导入excel文件读取excel文件获取

最新推荐文章于 2024-07-23 13:31:48 发布

奺儿

最新推荐文章于 2024-07-23 13:31:48 发布

阅读量1k

点赞数

文章标签： excel vue.js javascript

本文链接：https://blog.csdn.net/qq_47247479/article/details/130557374

版权

文章介绍了如何在Vue项目中使用xlsx库处理Excel文件上传，特别是针对view-ui-plus和elementplus组件的不同。关键步骤包括安装xlsx依赖，设置上传组件，读取文件内容，解析工作簿并转换成JSON数据。在处理文件时可能会遇到错误，解决办法是降级xlsx版本到0.16.0。

摘要由CSDN通过智能技术生成

先安装xlsx依赖

npm install--save xlsx

我用的是view-ui-plus的上传组件和element plus是有区别的下面会说

	<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>

在使用的页面引入

import XLSX from "xlsx";

新建tools.ts 创建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)
      }
  })
}

在使用的页面引入tools

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

调用readFile
element plus组件注意看注释

   /**
   * 文件上传
   * 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");
  }