美文网首页
vue3 上传excel

vue3 上传excel

作者: 罗不错 | 来源:发表于2023-03-06 18:58 被阅读0次
    const upload = {
      /*html*/
      template: ` 
    <input type="file" @change="onChange"  />
    {{tableHead}}
    <br/>
    {{tableData}}
      `,
      data() {
        return {
          fileList: [], //上传文件列表
          tableHead: [], //表头
          tableData: [], // 表数据
        };
      },
      methods: {
        onChange(e) {
          const file = e.target.files[0];
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = read(data, { type: "binary" });
              const params = [];
              // 取对应表生成json表格内容
              workbook.SheetNames.forEach((item) => {
                params.push({
                  name: item,
                  dataList: utils.sheet_to_json(workbook.Sheets[item]),
                });
                this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
              });
              // 该算法仅针对表头无合并的情况
              if (this.tableData.length > 0) {
                // 获取excel中第一个表格数据tableData[0][0],并且将表头提取出来
                for (const key in this.tableData[0][0]) {
                  this.tableHead.push(key);
                }
              }
              return params;
            } catch (e) {
              console.log("error:" + e);
              return false;
            }
          };
          fileReader.readAsBinaryString(file);
        },
      },
    };
    
    

    相关文章

      网友评论

          本文标题:vue3 上传excel

          本文链接:https://www.haomeiwen.com/subject/tzgmldtx.html