vue3 导入less vue文件导入功能

Excel 导入导出功能

Excel 导入功能

vue-template-admin upload 组件解析

知名的 Vue 后台管理系统框架 vue-template-admin 内封装了一个 Upload 上传组件，可以使用它来实现导入导出功能。

upload.vue：

<template>
  <div class="uploadExcel">
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick" />
    <div class="left">
      <el-button :loading="loading" style="margin-left: 16px" size="mini" type="primary" @click="handleUpload"> 点击上传 </el-button>
    </div>
    <div class="right" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      <span>将文件拖到此处</span>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'UpdateExcel',
  props: {
    beforeUpload: Function, // eslint-disable-line
    // 方法要返回boolean值，它可以定义解析excel前的限制条件，比如 size 文件大小限制
    onSuccess: Function // eslint-disable-line
    // 拿到解析excel后的回调函数
  },
  data() {
    return {
      loading: false,
      //最后要返回的数据格式
      excelData: {
        header: null,
        results: null
      }
    }
  },
  methods: {
    // 生成要解析完成后的数据结构，excelData 对象用于返回给外部接收
    generateData({ header, results }) {
      this.excelData.header = header
      this.excelData.results = results
      // props 方法：由外部传入并接收解析成功后的数据，并由外部来决定该如何处理
      this.onSuccess && this.onSuccess(this.excelData)
    },
    handleDrop(e) {
      // 由于浏览器存在文件拖入会默认开启一个新标签窗口来打开文件的行为，所以这里需要禁止冒泡给浏览器对象
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      //拿到拖入的文件对象数组
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        // 只支持一个文件拖入
        this.$message.error('Only support uploading one file!')
        return
      }
      const rawFile = files[0] // 只使用第一个文件

      // 判断是否是 excel 文件
      if (!this.isExcel(rawFile)) {
        // 只支持excel文件
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      }
      // 开始解析excel
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      //设置鼠标手势
      e.dataTransfer.dropEffect = 'copy'
    },
    handleUpload() {
      this.$refs['excel-upload-input'].click()
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    },

    upload(rawFile) {
      // 成功上传了，就重置 Input
      this.$refs['excel-upload-input'].value = null

      if (!this.beforeUpload) {
        // 如果父组件没有传入 beforeUpload 就直接解析 excel
        this.readerData(rawFile)
        return
      }
      // 如果传入了beforeUpload,它执行后要返回一个boolean值，如果boolean为true才开始解析
      const before = this.beforeUpload(rawFile)
      if (before) {
        this.readerData(rawFile)
      }
    },
    // 解析excel
    readerData(rawFile) {
      this.loading = true
      // 使用 xlsx 插件解析 excel 文件数据
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        // 读取文件完成后
        reader.onload = e => {
          const data = e.target.result
          // 读取 excel 文件内容，并形成一个数组返回【excel 由多个表格组成】
          const workbook = XLSX.read(data, { type: 'array' })
          // 返回第一个 excel 表格的名称
          const firstSheetName = workbook.SheetNames[0]
          // 根据 excel 表名称，返回对应的工作表格
          const worksheet = workbook.Sheets[firstSheetName]
          // 解析工作表格的头部数据
          const header = this.getHeaderRow(worksheet)
          // 解析工作表格的主体内容数据，并返回一个 json 格式
          const results = XLSX.utils.sheet_to_json(worksheet)
          // header头部数据  results:列表数据，传给 onSuccess 给外部接收并处理
          this.generateData({ header, results })
          this.loading = false
          resolve()
        }
        // 读取 excel 文件为数组流
        reader.readAsArrayBuffer(rawFile)
      })
    },
    // 解析表格头部行数据
    getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    },
    // 判断是否是 excel 文件格式
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadExcel {
  display: flex;
  width: 800px;

  margin: 0 auto;
  border: 1px dashed #ccc;
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .left {
    flex: 1;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px dashed #ccc;
  }
  .right {
    flex: 1;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

import.vue：

<template>
  <div class="import">
    <el-card>
      <h2 class="title">员工导入</h2>
      <UpdateExcel :before-upload="beforeUpload" :on-success="onSuccess" />
    </el-card>
  </div>
</template>
<script>
import moment from 'moment'
import { sysUserBatch } from '@/api/employees.js'
export default {
  methods: {
    beforeUpload(file) {
      return true
    },
    // excel 数据解析完成
    async onSuccess(obj) {
      // 将数据的中文的key转换成英文  1：数据循环  2：对象循环  拿到每一个key与value值，单独生成一个新对象添加到数组
      // 转换规则
      const temp = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      // 1:循环列表数据
      const newArr = obj.results.map(item => {
        const newObj = {}
        // 循环对象数据
        Object.keys(item).forEach(item2 => {
          // 产生一个以英文为key的对象
          if (item2 === '入职日期' || item2 === '转正日期') {
            newObj[temp[item2]] = this.changeDate(item[item2])
          } else {
            /*
            通过对象映射的方式：
                  item2 => '入职日期' 
                    temp['入职日期'] => timeOfEntry
                     newObj['timeOfEntry'] = xxx
            */
            newObj[temp[item2]] = item[item2]
          }
        })
        return newObj
      })
    },
    changeDate(num) {
      // excel时间特性：它是1900年开始，以天数计算时间到目前的总天数，以1开始为单位，以8点作为起始时间
      //  将天数转换成时间戳
      // 先将总天数转换成时间戳，-1天，-8小时后的时间戳
      const t = new Date((num - 1) * 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000)
      // 这个时间就是1970到现在的时间值，js时间是从1970年开始计算，需要再减少70年
      t.setYear(t.getFullYear() - 70)
      return moment(t).format('YYYY-MM-DD')
    }
  }
}
</script>
<style lang="scss" scoped>
.import {
  padding: 20px;
  .title {
    text-align: center;
    margin-bottom: 30px;
  }
}
</style>

map 和 forEach 的区别：

• forEach ：迭代一个数组，接收 item 和 index 两个参数，返回 undefined
• map：迭代一个数组，接收 item 和 index 两个参数，可以每次循环之后 return 一个数组项，最终返回一个新的数组

Excel 时间转换

需要注意：Excel 表格内的日期转换规则与编程界通用的时间戳规则不一致。

• excel：从 1900 年开始计算，结果以 天 为单位，从 1 开始算，以 8 点为时间开始点
• js：从 1970 年开始计算，结果以 毫秒 为单位，从 0 开始算，以 24 点为时间开始点

从以上两者规则可以看出，差距很大，所以需要进一步的转换：

methods: {
    changeDate(num){
    	// 将天数转换为时间戳
        // 先计算出 num 天数的时间戳（减去一天），最后再减去多出来的 8 小时的总值（Excel 以 8 点开始，num 的天数值相较于时间戳每天多出了 8 小时）
        const t = new Date((num - 1) * 24 * 60 * 60 * 1000 - (8 * 60 * 60 * 1000))
        // 设置年份（减去 Excel 多算的 70 年）
        t.setYear(t.getFullYear() - 70)
        return moment(t).format('YYYY/MM/DD')
	}
}

Excel 导出功能

Excel 的导出功能通常是由后端来实现的，前端只负责将后端提供的接口下载文件即可。

但 xlsx 插件也提供了 Excel 的导出功能，使得前端也能自行实现导出：

utils.js：

import { saveAs } from 'file-saver'
// 生成excel与解析excel数据
import XLSX from 'xlsx'

// 将json数据转换成excel并提供下载
// header：头部  ['姓名','转正时间'...]
// data:列表数据  [['张三'，‘2021-12-01’...]]
// filename:下载的文件名,默认是excel-list
export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) {
  /* original data */
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = [];
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
        return {
          'wch': 10
        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
        return {
          'wch': val.toString().length * 2
        };
      } else {
        return {
          'wch': val.toString().length
        };
      }
    }))
    /*以第一行为初始值*/
    let result = colWidth[0];
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch'];
        }
      }
    }
    ws['!cols'] = result;
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  });
  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), `${filename}.${bookType}`);
}

使用与实现：

假设

已有数据列表：

• header: ['userName','mobile','timeOfEntry','employment','workNumber','departmentName','correctionTime'],
• result: [{ userName: '黄开军',mobile: '17674123978',timeOfEntry: '2018/05/16',employment: '正式',workNumber: 'SC65',departmentName: '万达信息',correctionTime: '2018/07/29'},...]

要导出的表格格式：

• header: ['姓名','手机号','入职日期','聘用形式','工号',''组织名称,'转正日期']
• result: [['黄开军','17674123978‘,'2018/05/16','正式','SC65','万达信息','2018/07/29'],...]

最核心的地方就在于 header 头部数据的关系映射与转换规则。

<template>
	<div>
        <el-button @click="exportExcel">导出表格</el-button>
        <el-table :data="list">...</el-table>
    </div>
</template>

<script>
import {export_json_to_excel} from '@/utils'
    
export default {
    data(){
        return {
            list: [],
            
        }
    },
    methods: {
        // Excel 表格导出功能，（将el-table的数据导出）
        exportExcel(){
            // 创建数据转换规则
            const map = {
                '姓名': 'userName',
                '手机号': 'mobile',
                '入职日期': 'timeOfEntry',
                '聘用形式': 'employment',
                '工号': 'workNumber',
                '组织名称': 'departmentName',
                '转正日期': 'correctionTime'
            }
            
            // 当有分页的功能时，将 pageSize 设置为最大值，拿取到所有数据，并根据该数据进行转换处理
            const result = await sysUser({
                pageNum: 0,
                pageSize: 1000  //假设最大有 1000 条数据
            })
            
            // 对数据做映射提取的转换处理 [[...],[...]]
            const arr = result.map(item => {
                // 返回一个数组，并由 arr 接收并 push
                // ['黄开军','17674123978',...]
                return Object.keys(map).map(key => {
                   /* header[key] ==> header['姓名'] ==> item[header['userName']] ==> '黄开军' ...*/
                   return item[header[key]]
                })
            })
            
            // 最终由 XLSX 插件做导出处理
            import('@/utils.js').then(tool => {
                tool.export_json_to_excel({
                    header: Object.keys(header),  // 表格头部标题数据
                    data: arr,  // 表格列表数据
                    fileName: '用户列表'  // 导出的表格名称
                })
            }).catch((err) => {
                console.error('表格导出失败',err)
            })
        }
    }
}
</script>

Excel 文件下载

Excel 文件下载的操作其实与 <a> 标签创建 URL.createObjectURL(blob) 流一样的原理，不同点在于：

请求体必须指定 ： responseType: 'blob'。否则会出现成功下载了却打不开的情况。

//导出表格
export function exportTable(params){ 
  return axios({
    url: "/userlifetime/trend/export",
    method: "get",
    responseType: 'blob',
    params: params,
  });
}

// 导出表格
exportTableHandle(dateTypeLabel, type) {
  exportTable().then(res => {
        // 需要修改类型，此处 type 类型对应 .xlsx
        const blob = new Blob([res], {type: 'blob'})
        const objectUrl = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = objectUrl
        a.download = `test.xlsx` // 文件名 ，
        // a.click()
        // 下面这个写法兼容火狐
        a.dispatchEvent(
            new MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window
            })
        )
        window.URL.revokeObjectURL(blob)
	})
},