zoukankan      html  css  js  c++  java
  • 导入导出

    1.安装 npm install -S file-saver xlsx  和  npm install -D script-loader

    2.在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:https://files.cnblogs.com/files/luyuefeng/vendor.rar

    导出文件
    exportExcel() { //兼容ie10哦!   require.ensure([], () => {         const { export_json_to_excel } = require('../../vendor/Export2Excel');  //引入文件       const tHeader = ['姓名', '工号', '部门']; //将对应的属性名转换成中文 //const tHeader = [];  const filterVal = ['name', 'jobNumber', 'department'];//table表格中对应的属性名          const list = exportData;  //想要导出的数据       const data = this.formatJson(filterVal, list);         export_json_to_excel(tHeader, data, '列表excel'); }) },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
    }

    3.导入文件

    <input id="upload" type="file" @change="importfxx()"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
    importfxx(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();
           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]]);
                    let importList = _this.dateTransition(outdata);
           }
                reader.readAsArrayBuffer(f);
            }
            if(rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
    };
    // 将对应的中文key转化为自己想要的英文key
    dateTransition(outdata) {
      let list = [];
      var obj = {};
      for(var i = 0; i < outdata.length; i++) {
        obj = {};
        for(var key in outdata[i]) {
          if(key == '工号') {
            obj['jobNumber'] = outdata[i][key];
          } else if(key == '姓名') {
            obj['name'] = outdata[i][key];
          } else if(key == '部门') {
            obj['department'] = outdata[i][key];
          }
        }
        list.push(obj);
      }
      return list;
    };

     如果有报错要改下路径

    require('./Blob.js');

    要在main中引入这两个js

    在别名设置的里面设置两js的路径

  • 相关阅读:
    iptables操作指令
    最怕问初衷,大梦成空
    kettle官网wiki
    Pentaho Spoon (Kettle) 出现 Timestamp :Unable to get timestamp from resultset at index 30 错误的解决
    win10安装vs2013失败解决方法
    2020 最新 kail 安装教程
    01_docker学习笔记(一)
    数据结构的基础概念
    BOS3
    配置文件添加druid控制台
  • 原文地址:https://www.cnblogs.com/joer717/p/11043776.html
Copyright © 2011-2022 走看看