vue实现excel导出导入

文章目录

安装xlsx依赖和file-saver依赖
Excel导出
excel导入

安装xlsx依赖和file-saver依赖

复制代码

npm install xlsx -S
npm install file-saver -S

Excel导出

使用element-ui的el-table展示数据

复制代码

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

定义导出按钮

复制代码

<eh-button id="you-export" class="changeButton" @click="Export">主数据导出</eh-button>

将数据导出

复制代码

 //导出excel
    Export() {
      // 假设你的表格数据是从data属性获取的
      const data = this.getExportAllNodes(this.tableData);
      // 创建工作簿
      const ws = XLSX.utils.json_to_sheet(data);
      // 创建工作簿并添加工作表
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
      // 保存文件
      saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), '物料主数据.xlsx');
      // this.$refs.tableData.openExport();
    },
    getExportAllNodes(list) {
   	 //exportOutData为在data中创建的列表变量: exportOutData:[]
      this.exportOutData = [];
      list.forEach(item => {
        this.exportOutData.push({
          '物料编码': item.mrlCode,
          '物料名称': item.mrlName,
          '组织编码': item.useOrgCode,
          '图号(旧编码)': item.mrlOldCode,
          '物料分组编码': item.mrlGroupCode,
          '产品组编码': item.proGroupCode,
          '物料属性': item.mrlProperty,
          '存货类别编码': item.categoryCode,
          '基本单位': item.baseUnitCode,
          '基本净重': item.netWeight,
          '固定提前期': item.fixLeadTime,
          '批号管理': item.batchManage,
          '仓库编码': item.stockCode,
          '采购单位编码': item.purchaseUnitCode,
          '采购计价单位编码': item.purPriceUnitCode,
          '采购员编码': item.purchaserCode,
          '计划批量类型编码': item.batchType,
          '计划MRP编码': item.mrlControllerCode,
          '生产车间编码': item.workShopCode,
        });
      })
      return this.exportOutData;
  },

excel导入

定义文件导入显示框

复制代码

<el-dialog
          title="主数据导入"
          :visible.sync="youDataDialogVisible"
          @close="dialogAssetImpClose"
          custom-class="dialog-auto"
        >
          <el-form
            label-position="top"
            autocomplete="off"
            label-width="100px"
            :inline="true"
            class="form-container form-inline"
          >
            <div class="item-button">
              <el-button class="changeButton" v-throttle @click="hxMainDataUpload()">导入</el-button>
            </div>
            <el-form-item label="选择文件" prop="mbbUdiGid">
              <el-upload
                ref="upload"
                action="#"
                :auto-upload="false"
                :on-change="handleFileChange"
                :before-upload="beforeUpload"
              >
                <el-button slot="trigger" size="small" type="primary">选择Excel文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-dialog>

定义导入按钮

复制代码

<eh-button id="you-import" class="changeButton" @click="importYouData">主数据导入</eh-button>

点击导入按钮时将youDataDialogVisible 设置为true

解析选择的文件进行导入

复制代码

importYouData(){
	//youDataDialogVisible为data中定义的变量：youDataDialogVisible: false,
	this.youDataDialogVisible = true;
},
handleFileChange(file, fileList) {
      this.file = file.raw;
      const reader = new FileReader();
      reader.readAsArrayBuffer(this.file);
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        // const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        // 这里可以处理json数据，例如导入到数据库等
        const jsonData = XLSX.utils.sheet_to_json(worksheet);
        // jsonData现在是Excel文件的数据，格式为JSON
        // 在这里处理你的jsonData，例如保存到数据库等
        this.hxMainImportData = jsonData;
      };
    },
    hxMainDataUpload() {
      if (this.hxMainImportData == []) {
        this.$message.error('请选择要导入的Excel文件！');
        return;
      }
      let data = qs.stringify({
        hxMainDatas: JSON.stringify(this.hxMainImportData),
        loginId: this.$util.getCookie("loginName"),
      })
      //点击导入按钮，发送请求之前关闭数据导入弹窗
      this.$http.post("youController!importDatas.m", data).then((res) => {
        if (res.erroCode == 0) {
          this.hxMainDataDialogVisible = false;
          // 清除已上传的文件
          this.$refs.upload.clearFiles();
          this.queryHxMainMrlData();
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    //数据导入弹窗关闭方法
    dialogAssetImpClose() {
      this.$refs.upload.clearFiles(); // 清除已上传的文件
    },
    beforeUpload(file) {
      const isExcel = /\.(xlsx|xls|csv)$/.test(file.name);
      if (!isExcel) {
        this.$message.error('只能上传.xlsx、.xls、.csv 文件!');
        return false;
      }
      return true;
    },
  },