Vue2 导出excel

2020-07-15更新 excel导出

安装

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

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 => {
    // 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
}

vue页面中使用

import excel from '@/libs/excel'
export default {
    data () {
        return {
            dataList: [] //请求的数据放到这里，不赘
        }
    },
    methods: {
        // 页面上有个按钮 点击调用本方法，不赘述
        exportExcel () {
            const params = {
              // dataList中的字段 title,key 需要一一对应
              title: ['订单号', '订单来源', '车牌号'], 
              key: ['app_id', 'app_source', 'cars'],
              data: this.dataList, // 数据源
              autoWidth: true,
              // 时间戳函数自己定义formatDate
              filename: '清单' + formatDate(new Date(), 'yyyyMMddhhmmss')
            }
            excel.exportArrayToExcel(params)
        }
    }
}

===========================
以下为早期的文章

~~今天在开发的过程中需要做一个Vue的导出功能。~~
~~老司机开车使用 js-xlsx 里面有vue的部分可以参考~~
~~废话不多说了，直接贴代码~~

~~一、在index.html中引用js文件~~

  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

~~二、在vue文件中~~