vue上传excel

╰+攻爆jí腚メ 2023-01-10 13:27 206阅读 0赞

## 参考[https://blog.csdn.net/qq\_34462220/article/details/108741345][https_blog.csdn.net_qq_34462220_article_details_108741345] ##

在原基础上进行了改进

npm install xlsx -s

<template>
      <div>
        
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          accept=".xlsx"
          :on-exceed="exceed"
          :limit="1"
          :on-remove="remove"
          :http-request="uploadFile"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            1次只能上传1个xls文件，且不超过500kb
          </div>
        </el-upload>
        
        <div class="preview-excel">
          <el-table
            class="listTable_ele"
            v-show="listTable.length != 0"
            :data="listTable"
            stripe
            height="250"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="city"
              label="城市"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sno"
              label="学号"
              width="200"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </template>
     
    <script>
    import XLSX from "xlsx"; //引入xlsx
    export default {
      data() {
        return {
          listTable: [],
        };
      },
      methods: {
        //解析excel
        async uploadFile(params) {
          const _file = params.file;
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = XLSX.read(data, {
                type: "binary",
              });
              for (let sheet in workbook.Sheets) {
                //循环读取每个文件
                const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                //若当前sheet没有数据，则continue
                if (sheetArray.length == 0) {
                  continue;
                }
                console.log("读取文件");
                console.log(sheetArray);
                for (let item in sheetArray) {
                  let rowTable = Object.assign(
                    {},
                    {
                      name: sheetArray[item].姓名,
                      age: sheetArray[item].年龄,
                      city: sheetArray[item].城市,
                      sno: sheetArray[item].学号,
                    }
                  );
                  this.listTable.push(rowTable);
                }
                this.listTable = this.listTable.filter((item) => item.name);
                console.log(this.listTable, "1sacsdjbcjsd");
              }
            } catch (e) {
              this.$message.warning("文件类型不正确！");
            }
          };
          fileReader.readAsBinaryString(_file);
        },
        //上传1个以上文件时弹窗提示错误
        exceed: function () {
          this.$message.error("最多只能上传1个xls文件");
        },
        //删除文件
        remove() {
          this.listTable = [];
        },
      },
    };
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]

## ts版本 ##

<template>
      <div>
        
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          accept=".xlsx"
          :on-exceed="exceed"
          :limit="1"
          :on-remove="remove"
          :http-request="uploadFile"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip">1次只能上传1个xls文件，且不超过500kb</div>
        </el-upload>
        
        <div class="preview-excel">
          <el-table
            class="listTable_ele"
            v-show="listTable.length != 0"
            :data="listTable.listTable"
            stripe
            height="250"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="city"
              label="城市"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sno"
              label="学号"
              width="200"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </template>
     
    <script lang="ts">
    import {  defineComponent, reactive } from "vue";
    import XLSX from "xlsx"; //引入xlsx
    interface ListTable { 
      name: string;
      age: number;
      city: string;
      sno: string;
    }
    interface ListTable2 { 
      姓名: string;
      年龄: number;
      城市: string;
      学号: string;
    }
    export default defineComponent({ 
      setup() { 
        let listTable = reactive({ 
          listTable: new Array<ListTable>(),
        });
        //解析excel
        let uploadFile = async (params: {  file: any }) => { 
          const _file = params.file;
          const fileReader = new FileReader();
          fileReader.onload = (ev: any): void => { 
            try { 
              const data = ev.target.result;
              const workbook = XLSX.read(data, { 
                type: "binary",
              });
              for (let sheet in workbook.Sheets) { 
                //循环读取每个文件
                const sheetArray: Array<ListTable2> = XLSX.utils.sheet_to_json(
                  workbook.Sheets[sheet]
                );
                //若当前sheet没有数据，则continue
                if (sheetArray.length == 0) { 
                  continue;
                }
                console.log("读取文件");
                console.log(sheetArray);
                for (let item in sheetArray) { 
                  let rowTable: ListTable = Object.assign(
                    { },
                    { 
                      name: sheetArray[item].姓名,
                      age: sheetArray[item].年龄,
                      city: sheetArray[item].城市,
                      sno: sheetArray[item].学号,
                    }
                  );
                  listTable.listTable.push(rowTable);
                }
                listTable.listTable = listTable.listTable.filter(
                  (item) => item.name
                );
                console.log(listTable.listTable, "1sacsdjbcjsd");
              }
            } catch (e) { 
              // this.$message.warning("文件类型不正确！");
            }
          };
          fileReader.readAsBinaryString(_file);
        };
        //上传1个以上文件时弹窗提示错误
        let exceed = (): void => { 
          // this.$message.error("最多只能上传1个xls文件");
        };
        //删除文件
        let remove = (): void => { 
          listTable.listTable = [];
        };
        return { 
          listTable,
          uploadFile,
          remove,
          exceed,
        };
      },
    });
    </script>

## 做成一个弹框组件 ##

<template>
      <el-dialog
        title="导入"
        :visible.sync="exportExcelBoolean"
        width="60%"
        center
        :show-close="!exportExcelBoolean"
        :close-on-click-modal="!exportExcelBoolean"
      >
        <div class="export_Excel">
          
          <el-upload
            v-if="listTable.length == 0"
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            accept=".xlsx"
            :on-exceed="exceed"
            :limit="1"
            :on-remove="remove"
            :http-request="uploadFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              1次只能上传1个xls文件，且不超过500kb
            </div>
          </el-upload>
        </div>
         
          <div class="preview-excel">
            <el-table
              class="listTable_ele"
              v-show="listTable.length != 0"
              :data="listTable"
              stripe
              height="300"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="age"
                label="年龄"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="city"
                label="城市"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="sno"
                label="学号"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="exportExcelDialogCancal">取 消</el-button>
          <el-button type="primary" @click="exportExcelDialogConfirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </template>
     
    <script>
    import XLSX from "xlsx"; //引入xlsx
    export default { 
      props:{ exportExcelBoolean:Boolean},
      data() { 
        return { 
          listTable: [],
        };
      },
      methods: { 
        //取消按钮
        exportExcelDialogCancal(){ 
          this.$emit('exportExcelDialogBool');
          this.listTable = [];
        },
    
        //确定按钮
        exportExcelDialogConfirm(){ 
           //此处调接口 把数据 -- this.listTable --传给后台 , 返回成功 调用exportExcelDialogCancal()方法 
           alert("此处调接口")
        },
        //解析excel
        async uploadFile(params) { 
          const _file = params.file;
          const fileReader = new FileReader();
          fileReader.onload = (ev) => { 
            try { 
              const data = ev.target.result;
              const workbook = XLSX.read(data, { 
                type: "binary",
              });
              for (let sheet in workbook.Sheets) { 
                //循环读取每个文件
                const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
                //若当前sheet没有数据，则continue
                if (sheetArray.length == 0) { 
                  continue;
                }
                for (let item in sheetArray) { 
                  let rowTable = Object.assign(
                    { },
                    { 
                      name: sheetArray[item].姓名,
                      age: sheetArray[item].年龄,
                      city: sheetArray[item].城市,
                      sno: sheetArray[item].学号,
                    }
                  );
                  this.listTable.push(rowTable);
                }
                this.listTable = this.listTable.filter((item) => item.name);
              }
            } catch (e) { 
              this.$message.warning("文件类型不正确！");
            }
          };
          fileReader.readAsBinaryString(_file);
        },
        //上传1个以上文件时弹窗提示错误
        exceed: function () { 
          this.$message.error("最多只能上传1个xls文件");
        },
        //删除文件
        remove() { 
          this.listTable = [];
        },
      },
    };
    </script>
    
    <style lang="scss" scope>
    </style>

[https_blog.csdn.net_qq_34462220_article_details_108741345]: https://blog.csdn.net/qq_34462220/article/details/108741345
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]: /images/20221119/e4d0e253d84142f8826998f4c99893d0.png