vue 导出excel文件

vue 导出excel文件

一、安装 xlsx

npm install xlsx -S

二、创建 excel.js

import XLSX from 'xlsx'

function autoWidthFunc (ws, data) {
  // set worksheet max width per col
  const colWidth = data.map(row => row.map(val => {
    // if null/undefined
    if (val == null) {
      return { wch: 10 }
    } else if (val.toString().charCodeAt(0) > 255) {
      // if chinese
      return { wch: val.toString().length * 2 }
    } else {
      return { wch: val.toString().length }
    }
  }))
  // start in the first row
  const 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
}

function jsonToArray (key, jsonData) {
  return jsonData.map(v => key.map(j => { return v[j] }))
}

const exportArrayToExcel = ({ key, data, title, filename, autoWidth }) => {
  const wb = XLSX.utils.book_new()
  const arr = jsonToArray(key, data)
  arr.unshift(title)
  const ws = XLSX.utils.aoa_to_sheet(arr)
  if (autoWidth) {
    autoWidthFunc(ws, arr)
  }
  XLSX.utils.book_append_sheet(wb, ws, filename)
  XLSX.writeFile(wb, filename + '.xlsx')
}

export default {
  exportArrayToExcel
}

三、在使用的文件中引入 excel.js

import excel from '@/utils/excel'

	exportExcel(data) {
      const params = {
        title: ['序号', '内容', '处理人', '处理人电话', '发生时间', '状态'], //设置 excel 标题
        key: ['index', 'Content', 'userName', 'mobile', 'createDate', 'status'], //设置 excel 字段，该字段即为后台返回 json 数据的字段
        data: data,
        autoWidth: true,
        filename: this.getDateTime()
      }
      excel.exportArrayToExcel(params)
    },
    getDateTime(){
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth()+1;
      let d = date.getDate();
      let h = date.getHours();
      let i = date.getMinutes();
      let s = date.getSeconds();

      m < 10 ? m = '0'+ m : '';
      d < 10 ? d = '0'+ d : '';
      h < 10 ? h = '0'+ h : '';
      i < 10 ? i = '0'+ i : '';
      s < 10 ? s = '0'+ s : '';

      return  y + m + d + h + i + s;
    },