vue下载excel表格模板和导入excel表格数据

admin管理员组

文章数量:1609679

vue下载excel表格模板和导入excel表格数据

• • • • vue制作excel表格模板给前端下载

vue制作excel表格模板给前端下载

最近有个需求，需要导入excel表格，并且还需要制作模板给用户下载。

首先做好模板下载

 <el-row>
          <el-col :offset="20" :span="4">
            <el-button size="mini" type="primary" @click="downUp">下载模板</el-button>
            <el-button style="position:relative;overflow:hidden;margin-right:10px" size="mini" type="primary">
              <span>导入</span>
              <input @change="importf(this)" type="file" ref="upload" accept=".xls, .xlsx" style="opacity: 0;position: absolute; top: 0;left: 0;bottom:0"/>
            </el-button>
          </el-col>
  </el-row>

制作模板如下

//下载模板
      downUp(){
        const jsonData = [{codeStr:4301010010001,tenantName:'株洲地级市',currentVal:1000}];
        if (!jsonData.length) return;
        // 表格的列标题 如果出现科学技术法或者其他格式 使用 \t
        let title = '门店编号,门店名称,销售额\n';
        jsonData.map(item => {
          let key = {};
          key['门店编号'] = item.codeStr;
          key['门店名称'] = item.tenantName;
          key['销售额'] = item.currentVal;
          for (let i in key){
            title += `${key[i] + '\t'},`
          }
          title += '\n'
        });
        // encodeURIComponent 解决中文乱码
        let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title);
        // 创建a标签
        let link = document.createElement('a');
        link.href = uri;
        link.download='门店计划导入.xls';
        link.click()
      },

导入excel表格数据

//导入
      importf(obj) {
        let _this = this;
        let inputDOM = this.$refs.inputer;   // 通过DOM取文件数据
        this.file = event.currentTarget.files[0];
        var rABS = false; //是否将文件读取为二进制字符串
        var f = this.file;
        var reader = new FileReader();
        //if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function(f) {
          var binary = "";
          var rABS = false; //是否将文件读取为二进制字符串
          var pt = this;
          var wb; //读取完成的数据
          var outdata;
          var reader = new FileReader();
          reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for(var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            var XLSX = require('xlsx');
            if(rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                type: 'base64'
              });
            } else {
              wb = XLSX.read(binary, {
                type: 'binary'
              });
            }
            // outdata就是你想要的东西 excel导入的数据
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            // excel 数据再处理
            let arr = [];
            outdata.map(v => {
              let obj = {};
              obj.codeStr = v.门店编号;
              obj.tenantName = v.门店名称;
              obj.currentVal = v.销售额;
              arr.push(obj)
            });
            _this.accountList = [...arr];
            console.log( _this.accountList);
            _this.tableData1=[...arr]
            // _this.reload();
          };
          reader.readAsArrayBuffer(f);
        };
        if(rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      },

本文标签： 表格模板数据vueExcel