精华内容
下载资源
问答
  • vue上传excel表格并用table展示预览
    2021-06-24 15:53:22

    只能操作无合并的规规矩矩的excel表格。

    1、下载xlsx插件:npm install xlsx --save

    导出excel:npm install file-saver --save

    2、使用方法:代码中引用:

    import XLSX from "xlsx";
    import FileSaver from 'file-saver';

     3、代码实现思路。如果觉得有用的话,想求个赞,花了我一个多小时才写出来的,求夸夸。

    (๑• . •๑)

    生成table过程中还能自由操作table的行列。

    <template>
      <div>
        <el-upload
          ref="input"
          action="/"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="importExcel"
          type="file"
        >
          <el-button
            slot="trigger"
            icon="el-icon-upload"
            size="small"
            type="primary">
            上传文件
          </el-button>
        </el-upload>
        <el-button @click="exportToExcel">导出</el-button>
        <el-table style="width: auto" border :data="tableData" id="tableData">
          <template v-for="(item,index) in tableHead">
            <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index"
                             v-if="item.column_name !== 'id'"></el-table-column>
          </template>
        </el-table>
      </div>
    
    </template>
    
    <script>
    import XLSX from "xlsx";
    import FileSaver from 'file-saver'
    export default {
      name: "FillShippingCost",
    
      data() {
        return {
    // 表头数据
          tableHead: [],
    // 表格数据
          tableData: [],
        }
      },
      //data结束
      methods: {
    //导入
        importExcel(file) {
          const types = file.name.split(".")[1];
          const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(
            item => item === types
          );
          if (!fileType) {
            alert("格式错误!请重新选择");
            return;
          }
          this.file2Xce(file).then(tabJson => {
            if (tabJson && tabJson.length > 0) {
              const data = {};
              const this_ = this;
              // let params = Object.assign({}, this_.reviewForm);
              this_.card = JSON.stringify(tabJson[0].sheet);
              data.card = this_.card;            //中英文转化
              this_.excelToTable(data);//调用生成table方法
            }
          });
        },
        file2Xce(file) {
          return new Promise(function (resolve) {
            const reader = new FileReader();
            reader.onload = function (e) {
              const data = e.target.result;
              this.wb = XLSX.read(data, {
                type: "binary"
              });
              const result = [];
              this.wb.SheetNames.forEach(sheetName => {
                result.push({
                  sheetName: sheetName,
                  sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
                });
              });
              resolve(result);
            };
            reader.readAsBinaryString(file.raw);
          });
        },
        importMerchantInfo() {
    
        },
        // 把excel用转化为table
        excelToTable(data) {
          const outData = JSON.parse(data.card);
          // console.log("excel数据:  "+JSON.stringify(outData));
    
          const tableHeadList = [];
          let num = 1;
          for (const tableHead2 in outData[0]) {
            const tableHead1 = {};
            tableHead1['column_name'] = "column_name" + num;
            tableHead1['column_comment'] = tableHead2;
            num = num + 1;
            tableHeadList.push(tableHead1);
          }
          // console.log("表头数据:"+JSON.stringify(tableHeadList));
          this.tableHead = tableHeadList;//定制表头
    
          const tableDataList = [];
          for (let j = 0; j < outData.length; j++) {
            const tableData1 = {};
            for (let k = 0; k < tableHeadList.length; k++) {
              // console.log("表头字段:"+tableHeadList[k]['column_name']+",表头数据:" + tableHeadList[k]['column_comment']);
    
              for (const outDataKey in outData[j]) {
                if (outData[j].hasOwnProperty(outDataKey)) {//对于(可能迭代异常(自定义/继承)成员,可能缺少 hasOwnProperty 检查)的错误的解决,用if语句判断
                  if (tableHeadList[k]['column_comment'] === outDataKey) {
                    tableData1[tableHeadList[k]['column_name']] = outData[j][outDataKey];
                  }
                }
              }
            }
            tableDataList.push(tableData1);
          }
          this.tableData = tableDataList;//给表格内容赋值
        },
    //导出Excel
        exportToExcel () {
          let et = XLSX.utils.table_to_book(document.getElementById('tableData')); //此处传入table的DOM节点
          let etOut = XLSX.write(et, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
          });
          try {
            FileSaver.saveAs(new Blob([etOut], {
              type: 'application/octet-stream'
            }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
          } catch (e) {
            console.log(e, etOut) ;
          }
          return etOut;
        }
      }
    }
    
    </script>
    
    <style scoped>
    
    </style>
    

    更多相关内容
  • 主要介绍了vue实现Excel文件的上传与下载功能,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue excel上传预览和table内容下载到excel文件中,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue上传excel

    2021-01-24 15:35:03
    参考...npm install xlsx -s <template> <div> <...-- excel表格上传 --> <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts

    参考https://blog.csdn.net/qq_34462220/article/details/108741345

    在原基础上进行了改进

    npm install xlsx -s
    
    <!--
     * @Author: zhang_gen_yuan
     * @Date: 2021-01-24 14:32:25
     * @LastEditTime: 2021-01-24 19:25:28
     * @Descripttion: 
    -->
    <template>
      <div>
        <!--  excel表格上传  -->
        <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>
        <!--  上传的excel表格预览  -->
        <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>
    
    

    在这里插入图片描述

    ts版本

    <!--
     * @Author: zhang_gen_yuan
     * @Date: 2021-01-24 14:32:25
     * @LastEditTime: 2021-01-25 17:54:31
     * @Descripttion: 
    -->
    <template>
      <div>
        <!--  excel表格上传  -->
        <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>
        <!--  上传的excel表格预览  -->
        <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>
    

    做成一个弹框组件

    <!--
     * @Author: zhang_gen_yuan
     * @Date: 2021-01-24 14:32:25
     * @LastEditTime: 2021-01-28 15:51:31
     * @Descripttion: 
    -->
    <template>
      <el-dialog
        title="导入"
        :visible.sync="exportExcelBoolean"
        width="60%"
        center
        :show-close="!exportExcelBoolean"
        :close-on-click-modal="!exportExcelBoolean"
      >
        <div class="export_Excel">
          <!--  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>
         <!--  上传的excel表格预览  -->
          <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>
    
    
    
    展开全文
  • 主要介绍了使用Vue+Spring Boot实现Excel上传,需要的朋友可以参考下
  • filelists){ console.log('file===beforeRemove===',file) console.log('filelists===beforeRemove===',filelists) }, // 上传前的回调 handleUpload(file){ this.fileList=[file] }, 文件校验 参数规整 上传后导入...

    按钮根据element进行设置的,

    // 文件删除时的回调

         handleRemove(file,filelists){

           console.log('file===handleRemove===',file)

          console.log('filelists===handleRemove===',filelists)

         },

         // 删除前的回调

         beforeRemove(file,filelists){

          console.log('file===beforeRemove===',file)

          console.log('filelists===beforeRemove===',filelists)

         },

         // 上传前的回调

         handleUpload(file){

            this.fileList=[file]

         },

    文件校验

     参数规整

     上传后导入按钮会自动跳动不太友好,所以进行隐藏并且调整按钮之间的间距

     

     

     

    展开全文
  • <el-row> 批量导入:"> ,.xlsx"> 选取文件</el-button> 上传到服务器</el-button> 只能上传xls/xlsx文件</div> </el-upload> </el-form-item> </el-row> //重新选择的时候清除原来的文件 delFile() {...
    <el-row>
    	<el-form-item label="批量导入:">
    		<el-upload 
    		action="" 
    		:auto-upload="false" 
    		:file-list="fileList" 
    		:on-change="handleChange"
    		accept=".xls,.xlsx">
    			<el-button slot="trigger" type="primary" @click="delFile">选取文件</el-button>
    			<el-button type="success" @click="submitUpload" :loading="uploadLoading">上传到服务器</el-button>
    			<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
    		</el-upload>
    	</el-form-item>
    </el-row>
    
    //重新选择的时候清除原来的文件
    	delFile() {
    		this.fileList = [];
    	},
    	//文件状态改变时的钩子函数
    	handleChange(file, fileList) {
    		this.fileList = fileList;
    	},
    	//单击上传到服务器(提交)按钮
    	submitUpload() {
    		if (this.fileList.length == 0) {
    			return this.$message.error("请选择文件");
    		}
    		this.uploadLoading = true;
    		let formData = new FormData(); //文件转换
    		//fileList对应服务器接收名称
    		formData.append("fileList", this.fileList[0].raw);
    		console.log(formData);
    		this.$axios.post('/wage/importWage', formData, {
    				"Content-Type": "multipart/form-data;charset=utf-8"
    			})
    			.then(res => {
    				this.uploadLoading = false;
    				console.log(res);
    				this.$message.success("导入成功");
    				this.fileList = [];
    				//获取列表
    				this.getWageList();
    			})
    			.catch(error => {
    				this.$message.error(error);
    			})
    
    	},
    	handleSelect() {
    
    			},
    
    public Integer importWage(Sheet sheet) {
            //先清空表
    //        salemanMapper.deleteAll();
            // 获取该工作表的第一行
            Row row = null;
            // 获取该工作表的第一个单元格
            Cell cell = null;
            //获得总列数
            int coloumNum=sheet.getRow(0).getPhysicalNumberOfCells();
            //获得总行数
            int rowNum=sheet.getPhysicalNumberOfRows();
    
            for (int i = 1; i < rowNum; i++) {//遍历行//i从1开始,是指从excel的第二行(去掉第一行的表头)
                // 在循环里面写,List保存的是引用,故在外边写会被覆盖,对象的地址相同
                Saleman saleman = new Saleman();
                row = sheet.getRow(i);
                for(int j=1; j<coloumNum; j++){//遍历列
    
                    // 数字取整
                    DecimalFormat df = new DecimalFormat("0.00");
                    // 获取第I+1列 第j+1个单元格
                    cell = row.getCell(j);
    
                    String str = "";
                    if(cell==null||cell.equals(null)||cell.getCellType()==CellType.BLANK){
                        str="null";
                    }else {
                        //判断数据类型        cell.getCellFormula();
                        switch (cell.getCellType()) {
                            case FORMULA:
                                str = "" + cell.getNumericCellValue();     //单元格有公式的处理方式
                                break;
                            case NUMERIC:
    
                                DecimalFormat df1 = new DecimalFormat("#.##");    //单元格数字避免科学计数法
                                str = "" + df1.format(cell.getNumericCellValue());
    //                            str = "" + cell.getNumericCellValue();
    
                                break;
                            case STRING:
                                str = cell.getStringCellValue();
                                break;
                            default:
                                break;
                        }
                    }
    
                    //判断是第几列,好存入对象
    
                    if(j==1){
                        saleman.setDeptName(str);
                        //找到dept表的comcode
    //                    Dept dept = deptMapper.findByDeptname(str);
    //                    saleman.setComcode(dept.getComcode());
                    }
                    else if(j==2){
                        saleman.setComcode(str);
                    }
                    else if(j==3){
                        saleman.setType(str);
                    }
                    else if(j==4){
                        saleman.setUsername(str);
                    }
                    else if(j==5){
                        saleman.setNumberid(str);
                    }
                    else if(j==6){
                        saleman.setContype(str);
                    }
                    else if(j==7){
                        saleman.setBaseWage(str);
                    }
                    else if(j==8){
                        saleman.setAchieveWage(str);
                    }
                    else if(j==9){
                        saleman.setTotalWage(str);
                    }
                }
                //检查人员重复问题
                Saleman s = salemanMapper.manByUsernam(saleman.getUsername());
                if(s==null){
                    salemanMapper.add(saleman);
                }
                else{
                    salemanMapper.update(saleman);
                }
    
            }
    
            return 1;
        }
    
    //批量导入
        @RequestMapping("/importWage")
        @ResponseBody
        public String importWage(@RequestParam("fileList") MultipartFile multipartFile, HttpServletRequest request){
            //判断所上传文件是否存在
            if(multipartFile.isEmpty()){
                return "上传错误";
            }
            //获取上传文件的原始名称
            String originalFilename = multipartFile.getOriginalFilename();
            //设置上传文件的保存地址目录
            String dirPath = request.getSession().getServletContext().getRealPath("/upload/");
            File filePath = new File(dirPath);
            //如果保存的地址不存在,就先创建目录
            if (!filePath.exists()) {
                filePath.mkdirs();
            }
            //获取当前文件的后缀
            String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //获取当前时间并格式化
            Date d = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            System.out.println(sdf.format(d) + originalFilename.substring(0,originalFilename.lastIndexOf(".")));
            String newFileName = sdf.format(d) + originalFilename.substring(0,originalFilename.lastIndexOf(".")) + "." + suffix;
    
            //使用UUID重新命名上传的文件名称(UUID(唯一识别码)+原始文件名称后缀)
    //        String newFileName = UUID.randomUUID() + "." + suffix;
            File targetFile = new File(dirPath + newFileName);
            try {
                //创建可能会有错误,强制添加异常
                multipartFile.transferTo(targetFile);
    
                //插入数据库
                InputStream in = new FileInputStream(targetFile);
    
    //            HSSFWorkbook workbook = new HSSFWorkbook(in);// 创建对Excel工作薄
    //            HSSFSheet sheet = workbook.getSheetAt(0);
    
                Workbook workbook = WorkbookFactory.create(in);
                Sheet sheet = workbook.getSheetAt(0);
    
                // 调用Service,将数据插入Excel
                int i = salemanService.importWage(sheet);
                System.out.println("--------------------------"+i);
    //            if (i > 0) {
    //                return "导入成功";
    //            } else {
    //                return "导入失败";
    //            }
            } catch (IOException e) {
                e.printStackTrace();
                return "上传错误";
            }
            System.out.println(dirPath + newFileName);
            return "上传成功"+"文件地址="+dirPath + newFileName;
        }
    
    展开全文
  • 前端上传Excel文件,并根据Excel文件的模板内容解析字段到页面上,这个过程不需要后端参与。 主要用到了 XLSX.utils.sheet_to_json 2. 实现 2.1 HTML <el-upload style="margin-left: 20px" :auto-upload=...
  • 首先是前端页面代码,需要导入xlsx的依赖 ...然后是前端的两个vue文件 1.index.vue <template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept
  • 上传更新 methods: { beforeUpload(file) { let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this....
  • vue上传excel文件封装

    2021-05-21 16:22:21
    封装上传excel组件 <template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop=...
  • 遇到vue上传excel失败的问题,后端是Python接收,python代码如下: 下面首先使用postman测试,直接调用后端接口是没问题的: 但因为前端vue.config.js配置了请求代理,导致vue页面上传excel经过代理之后的请求...
  • vue 上传excel功能

    2020-11-20 17:25:12
    " type="text" @click="submitUpload">上传</el-button> //获取文件流 changeUploadCoverImg(event) { this.file = event.raw; //获取file文件 }, // 限制模板 handleExceed(files, fileList) { this.$message....
  • Vue导入上传Excel

    2021-12-27 16:08:39
    Excel的数据进行上传首先需要使用xlsx 此文章的上传方式为手动上传(数据解析可在前端进行,也可交由后端处理) 安装插件 npm install xlsx 引入 import XLSX from ‘xlsx’ 使用el-upload进行上传 (el-upload在...
  • 由于项目需要同时导入excel文档和jpg图片,因此尝试了一些方法来完成任务。 图片数据是以base64格式存入的,显示和转移都比较...使用的是element-ui,使用的是vue解析excel方法,需要安装xslx,可参考https://blog.cs
  • 点击按钮,上传excel文件。因为后端获取excel中的数据比较难,但是前端能很轻松的解析excel文件获取数据。将上传的excel文件的数据解析出来,post请求提交给后端。用到了element-ui中的el-upload。 一、准备 安装...
  • vue导入导出excel文件

    2019-04-16 09:00:39
    vue导入导出excel文件所需要用到的依赖文件,从网上转载而来,并非原创。大家需要可以从别处下载,这里下载需要积分,本人上传只是为了方便保存以供以后所用。
  • Vue上传Excel文件并校验Excel内容

    千次阅读 2019-03-29 14:16:09
    在近期开发的学校管理系统中,有一个导入管理模块,其中包含Excel上传功能,由用户选择文件后进行上传,前端需要对文件内容进行初步校验后给出是否符合规范的提示后再传给后端。这就需要前端事先对Excel文件内容...
  • (一)vue导入上传excel功能

    千次阅读 2021-02-05 00:14:20
    1、excel上传功能ref="upload":show-upload-list="false":default-file-list="defaultList":on-success="handleSuccess":on-error="handleError":format ="['xlsx','xls']":max-size="fileSize":on-format-error=...
  • vue Excel文件上传

    2021-12-02 10:58:55
    使用element组件el-upload <el-upload ref="upload"action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload"> ...el-button type="primary" style="width: 150...上传文件</el
  • </strong> </div> </a-modal> </div> js上传Excel // 使用到的data uploadUrlExcel: process.env.VUE_APP_API_BASE_URL + '/order/order/batchOrderImport', //上传url headers: { token: Vue.ls.get(ACCESS_TOKEN) ...
  • Vue 中使用 Upload 组件上传 Excel

    千次阅读 2021-07-02 17:04:34
    vue 中使用 Element 的 upload 组件上传 Excel,大致可以分两种情况 使用 action 上传到服务器 使用 axios 上传到服务器 注意:上传文件可能由于前后端格式不统一导致上传失败 application/x-...
  • 使用mixin.js将方法作为公用方法 import XLSX from 'xlsx' // mixins.js export const xlsxMixin = { methods: { impExcel(e) { //导入信息 const that = this let fileName = e.target.files[0] ...
  • vue项目中上传excel文件

    千次阅读 2020-11-23 10:36:51
    class="uploadExcel" accept=".xls, .xlsx" id="importExcel" @change="submitCollectionFlowImport" /> js: import axios from "axios"; submitCollectionFlowImport: function (type) { var self =.
  • 本文章基于typescript 和 vue-property-decorator修饰器代码风格 实现批量导入 读取Excel表格转换成所需data数据 附图------ 一。 1. 首先 项目中引入插件XLSX并注册 2. 下图为dom结构。。。。。。。 3....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,509
精华内容 1,803
关键字:

vue上传excel

友情链接: AP109P06V1.5.zip