zoukankan      html  css  js  c++  java
  • 后台管理系统中的导入和导出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是数组中对象的属性

     
  • 相关阅读:
    fmt:formatNumber use locale display negative currency in -$xxx.xx format in JSTL
    Order By 问题集合
    Order By 问题集合
    mybatis异常invalid comparison: java.util.Date and java.lang.String
    mybatis异常invalid comparison: java.util.Date and java.lang.String
    requestLayout, invalidate和postInvalidate的异同
    如何关闭打开了多个activity的activity
    关于handler的再次讨论
    Android中pull解析XML文件的简单使用
    使用广播退出打开了多个activity的程序
  • 原文地址:https://www.cnblogs.com/liuqianrong/p/11114212.html
Copyright © 2011-2022 走看看