vue导出Excel表格（简单）

一、安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

二、下载文件

在 /src 目录下新建 vendor文件夹，用于存放 Blob.js 和 Export2Excel.js 文件。

百度网盘下载地址
链接: https://pan.baidu.com/s/1efys5Awc5BxMdK71Jy1vKw 提取码: kjns

三、修改Export2Excel.js文件

如图，将红框中的路径修改你的Blob.js文件实际路径。不然会报错。

四、创建util.js文件用于统一处理export2Excel的数据

export function export2Excel(columns, list, title) {
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/utils/excel/Export2Excel')
    let tHeader = []
    let filterVal = []
    if (!columns) {
      return
    }
    columns.forEach(item => {
      tHeader.push(item.title)
      filterVal.push(item.key)
    })
    const data = list.map(v =>
      filterVal.map(j => {
        let value = v[j]
        let column = columns.find(col => col.key === j)
        const { transform } = column
        if (transform && typeof transform === 'function') {
          value = transform(v[j])
        }
        return value
      })
    )
    export_json_to_excel(tHeader, data, title || '数据列表')
  })
}

五、组件使用

<template>
  <div class="home">
    <button @click="handleExport">导出</button>
  </div>
</template>

<script>
const dataList = [
  {
    key: '1',
    name: 'Brown John',
    sex: 0,
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    sex: 1,
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park'
  },
]
const exportColumns = [
  {
    title: '序号',
    key: 'key'
  },
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '性别',
    key: 'sex',
    transform: (text) => {
      switch (text) {
        case 0:
          return '女生'
          break
        case 1:
          return '男生'
          break
        default:
          return '变态'
          break
      }
    }
  },
  {
    title: '地址',
    key: 'address'
  },
]
import { export2Excel } from '@/utils/util'
export default {
  methods: {
    handleExport () {
      export2Excel(exportColumns, dataList, '表格名称')
    }
  }
};
</script>

参考

参考1
参考2
参考3
导出多级表头
js-xlsx 实现 Excel 文件导出功能

数据流方式（后台生成复杂表格）

    // 档案导出
    exportCard (record) {
      const params = {
        unitSn: record.unitSn,
        userId: record.id
      }
      exportCard(params).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', decodeURI('基础信息—' + record.userName))
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }