Vue2导出Excel

安装依赖:

npm install -S file-saver xlsx

npm install -D script-loader

下载依赖的JS,下载后把两个JS复制到项目里,并在main.js中引入:

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

webpack.base.conf.js做如下修改

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss_vars': '@/styles/vars.scss',
      'excel': path.resolve(__dirname, '../src/excel'),//新增加一行
  }
},

导出

准备工作做完之后就开始正式导出:

outExe() {
  this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 需要导出的数据
    this.excelData = JSON.parse(JSON.stringify(this.table_data)); // 为了防止在处理导出数据的时候影响到表格数据,这里需要深拷贝!!
    this.export2Excel()
  }).catch(() => {
    this.$message.error('导出操作出现了异常,请稍后重试!')
  });
},

// 参数配置
export2Excel() {
  var that = this;
  require.ensure([], () => {
    const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径,这个文件就是之前那两个依赖的JS
    const tHeader = [
      '工资总额基数','本月计薪开始日', '本月计薪结束日',
      '出勤天数(天)','出勤工资(元)','迟到/早退次数',
      '迟到/早退扣款(元)','旷工天数','旷工扣款(元)',
      '事假天数', '事假扣款(元)', '绩效(元)',
      '业绩提成(元)', '应发工资(元)', '代扣个人所得税(元)',
      '实发工资(元)', '其他'
    ]; // 导出的表头名(key)
    const filterVal = [
      'totalSalary','monthStart','monthEnd',
      'monthDay','monthDaySalary','leaveCount',
      'leaveWithdrawing','absenteeismCount','absenteeismWithdrawing',
      'leaveAbsenceCount','leaveAbsenceWithdrawing','performance',
      'performanceDrawing','salary','personalExpenses',
      'actualSalary','other'
    ]; // 导出的表头字段名(value)
    const list = that.excelData;
    const data = that.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, `薪资管理`);// 导出的表格名称,根据需要自己命名
  })
},


/**
 * 数据格式化
 * @param filterVal
 * @param jsonData
 */
formatJson(filterVal, jsonData) {
  return jsonData.map(v => {
    v.monthStart = this.dateFormatter(v.monthStart); // 在这里为时间字段值进行单独的格式化
    v.monthEnd = this.dateFormatter(v.monthEnd);
    return filterVal.map(j => v[j])
  })
},


dateFormatter(str) {
  if (!str) {
    return "";
  }
  return this.$dateFormat(str, "yyyy-MM-dd") // 具体实现在下面,大家想怎么处理这个函数都随意,只要能够格式化自己想要格式化的字段就行
},

// this.$dateFormat(str, "yyyy-MM-dd")
export default (date, fmt) => {
  //如果是时间戳的话那么转换成Date类型
  if (typeof date === 'number') {
    date = new Date(date)
  } else if (typeof date === 'string') {
    date = new Date(parseInt(date))
  }

  let o = {
    //月份
    "M+": date.getMonth() + 1,
    //日
    "d+": date.getDate(),
    //小时
    "h+": date.getHours(),
    //分
    "m+": date.getMinutes(),
    //秒
    "s+": date.getSeconds(),
    //季度
    "q+": Math.floor((date.getMonth() + 3) / 3),
    //毫秒
    "S": date.getMilliseconds()
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
  return fmt
}

我在导出的时候有一个问题(除了表格数据被影响之外),日期导出之后就是1970-01-01了,这个时候需要在Export2Excel.js中修改部分代码:

这个干掉就行了。

导入

这个没有亲测过,留着以后再说。

<a href="javascript:;" class="file">导入表格
   <input id="upload" type="file" @change="importfxx(this)"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</a>
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();
  //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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
      this.da = [...outdata]
      let arr = []
      this.da.map(v => {
        let obj = {}
        obj.id = v.id
        obj.status = v.status
        arr.push(obj)
      })
      console.log(arr)
      let para = {
        //withList: JSON.stringify(this.da)
        withList: arr
      }
      _this.$message({
        message: '请耐心等待导入成功',
        type: 'success'
      });
      withImport(para).then(res => {
        window.location.reload()
      })
    }
    reader.readAsArrayBuffer(f);
  }
  if(rABS) {
    reader.readAsArrayBuffer(f);
  } else {
    reader.readAsBinaryString(f);
  }
},
Last modification:May 11th, 2018 at 11:10 am
If you think my article is useful to you, please feel free to appreciate

5 comments

  1. 图南山

    完全看不懂

  2. Lundy

    Thanks for sharing with us,support you

  3. ssr

    谢谢分享,写得很细致

  4. star

    非常棒,顶一个!ヾ(≧∇≦*)ゝ

  5. 林洋洋

    来走访下,儿童节快乐哈!OωO

Leave a Comment