后台管理系统中的导入和导出excel（支持中文）

在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是数组中对象的属性

转载于:https://www.cnblogs.com/liuqianrong/p/11114212.html