liuqianrong

在main.js中引入全局引入excel插件

import Blob from \'./util/Blob.js\'

import Export2Excel from \'./util/Export2Excel.js\'

在后台管理系统中常用的两种

1.下载空模板&导入数据

template:

                <el-button type="primary" icon="el-icon-download" class="ib" @click="downloadTemplate" plain>下载商家清单模板</el-button>
                <el-button type="primary" icon="el-icon-upload2" class="upload_btn ib">
                  导入商家清单
                  <input id="upload" class="file" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                </el-button>

css:

<style scoped>
.upload_btn{ position: relative; margin-bottom: 10px;}
.upload_btn .file{position: absolute;left: 0;top: 0;height: 100%;width: 100%; opacity: 0;cursor: pointer;}
</style>

methods:

      //下载模板
      downloadTemplate:function(){
            var that = this;
            require.ensure([], () => {
                  const { export_json_to_excel } = require(\'../../../util/Export2Excel\'); //这里必须使用绝对路径
                  const tHeader = [\'一\',\'二\',\'三\',\'四\']; // 导出的表头名
                  export_json_to_excel(tHeader, [], `模板`);// 导出的表格名称,根据需要自己命名
            })
      },
      //导入商家清单
      importfxx:function(obj){
          let _this = this;
          let inputDOM = this.$refs.inputer;
          // 通过DOM取文件数据
          _this.excellist=[];
          this.file = event.currentTarget.files[0];
          var rABS = false; //是否将文件读取为二进制字符串
          var f = this.file;
          var reader = new FileReader();
          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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
                  this.da = [...outdata]
                  this.da.map(v => {
                      let obj = {}
                      obj.a= v[\'一\'];
                      obj.b = v[\'二\'];
                      obj.c = v[\'三\'];
                      obj.d = v[\'四\'];
                      _this.excellist.push(obj);//导入生成数据
                  })
              }
              reader.readAsArrayBuffer(f); 
          }
          if(rABS) {
              reader.readAsArrayBuffer(f);
          } else {
              reader.readAsBinaryString(f);
          }
          document.getElementById(\'upload\').value = \'\';       
        },
_this.excellist=[];记得在导入之前把所有数据清空
document.getElementById(\'upload\').value = \'\';加上这一句,可以解决change事件无法重复导入的问题

2.下载有数据的excel文件
methods:
     export2Excel(allData) {
            var that = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require(\'../../../util/Export2Excel\'); //这里必须使用绝对路径
                const tHeader = [\'一\',\'二\',\'三\',\'四\']; // 导出的表头名
                const filterVal = [\'a\',\'b\',\'c\',\'d\']; // 导出的表头字段名
                const list = allData;
                const data = that.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, `表格名称`);// 导出的表格名称,根据需要自己命名
            })
      },
      formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
      },

tHeader是表头,allData是所有数据的数组,filterVal是数组中对象的属性

 

分类:

技术点:

相关文章: