vue2.x 实现纯前端导出excel

1,841 阅读1分钟

引入包

npm install xlsx -S // 发文时间是 0.16.9 这个版本

新建excel.js

src文件夹下新建一个libs文件夹,新建一个excel.js

import XLSX from 'xlsx'

function autoWidthFunc (ws, data) {
  // set worksheet max width per col
  const colWidth = data.map(row => row.map(val => {
    var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");//检测字符串是否包含汉字
    if (val == null) {
      return { wch: 10 }
    } else if (reg.test(val)) {
      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
}

vue页面

import excel from '@/libs/excel'
export default {
    data () {
        return {
            dataList: [{ // dataList中的字段 title,key 需要一一对应
                    'app_id': '1',
                    'app_source': '淘宝',
                    'cars': '666666'
            },
            {
                    'app_id': '2',
                    'app_source': '京东',
                    'cars': '666667'
            }]
        }
    },
    methods: {
        // 页面上有个按钮 点击调用exportExcel
        exportExcel () {
            const params = {
              title: ['订单号', '订单来源', '车牌号'], 
              key: ['app_id', 'app_source', 'cars'],
              data: this.dataList, // 数据源
              autoWidth: true, //autoWidth等于true,那么列的宽度会适应那一列最长的值
              filename: '清单'            
            }
            excel.exportArrayToExcel(params)
        }
    }
}

效果展示

1.png

参考文档

Vue2 导出excel

xlsx npm包地址

总结

通过上述简单的步骤就可以实现纯前端导出excel. 有需要的小伙伴可以先马后看