搜索

Vue上传XLS文件


发布时间: 2022-11-24 18:53:00    浏览次数:49 次
data() {
    return {
      tableData:[]
    }
},
//原生JS+XLSX包实现 xls文件上传
methods: {
    //上传excel表格文件
    uploadHandler(data){//对应的是 upload中的 => :http-request="uploadHandler"
      uploadHandler(data) {
      const file = data.file; //上传的excel文件
      // 1 读取到的文件
      const reader = new FileReader(); // 创建一个文件读取的实例
      reader.readAsArrayBuffer(file)
      reader.onload = async (e) => {
          // 当onlaod事件的时候,文件读取完成
          console.log(e.target.result)
          // 2 使用插件转成json格式
          const filedata = e.target.result; // excel文件数据
          // 3 利用XLSX对数据进行解析
          const fileBook = await XLSX.read(filedata, { type: Array })
          // 4 获取第一张表的表名
          const sheetName = fileBook.SheetNames[0];
          // 5 根据第一张表的表名获取这个表里面的内容
          const sheetData = fileBook.Sheets[sheetName]
          // 6 解析数据体
          const json = XLSX.utils.sheet_to_json(sheetData)
          console.log(json)
          // 7 显示在表格中
          this.tableData = json;
      }
    }
  },

 

免责声明 Vue上传XLS文件,资源类别:文本, 浏览次数:49 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 06:53:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/ltwlh/p/16922858.html