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;
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值