vue3 上传excel

2023-03-06  本文已影响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);
    },
  },
};

上一篇下一篇

猜你喜欢

热点阅读